💸 Perf - Load AOS only where it's used

app/(events)/events/[...filename]/page.tsx

@@ -6,7 +6,6 @@ import { getSEOProps } from "@/lib/seo";
 import { EVENTS_MAX_SIZE_OVERRIDE } from "@/services/server/getEvents";
 import { fetchTinaData, FileType } from "@/services/tina/fetchTinaData";
 import client from "@/tina/client";
-import "aos/dist/aos.css"; // This is important to keep the animation
 import { Metadata } from "next";
 import { cache } from "react";
 import EventsPage from "./events";

app/consulting/[filename]/page.tsx

@@ -2,7 +2,6 @@ import { TinaClient } from "@/app/tina-client";
 import { getSEOProps } from "@/lib/seo";
 import { fetchTinaData, FileType } from "@/services/tina/fetchTinaData";
 import client from "@/tina/client";
-import "aos/dist/aos.css"; // This is important to keep the animation
 import { Metadata } from "next";
 import { cache } from "react";
 

app/consulting/video-production/[filename]/page.tsx

@@ -3,7 +3,6 @@ import ClientFallback from "@/components/client-fallback";
 import { getSEOProps } from "@/lib/seo";
 import { fetchTinaData } from "@/services/tina/fetchTinaData";
 import client from "@/tina/client";
-import "aos/dist/aos.css"; // This is important to keep the animation
 import { Metadata } from "next";
 import VideoProduction from "./video-production";
 

app/tina-client.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import AOS from "aos";
-import { useEffect } from "react";
 import { useTina } from "tinacms/dist/react";
 export type UseTinaProps = {
   query: string;
@@ -21,22 +19,5 @@ export function TinaClient<T>({ props, Component }: TinaClientProps<T>) {
     data: props.data,
   });
 
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      AOS.init({
-        duration: 1200,
-        once: true,
-      });
-
-      AOS.refresh();
-    }
-
-    return () => {
-      if (typeof window !== "undefined") {
-        AOS.refreshHard();
-      }
-    };
-  }, []);
-
   return <Component tinaProps={{ data }} props={{ ...props }} />;
 }

components/blocks/imageComponents/ImageComponentLayout.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { Container } from "@/components/util/container";
 import { VideoModal } from "@/components/videoModal";
-import "aos/dist/aos.css";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { tinaField } from "tinacms/dist/react";

components/blocks/imageComponents/accordionBlock/accordionBlock.tsx

@@ -8,7 +8,6 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { cn } from "@/lib/utils";
-import "aos/dist/aos.css";
 import classNames from "classnames";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";

components/blocks/imageComponents/imageTextBlock/imageTextBlock.tsx

@@ -2,7 +2,6 @@
 import AlternatingText from "@/components/alternating-text";
 import ButtonRow from "@/components/blocksSubtemplates/buttonRow";
 import { cn } from "@/lib/utils";
-import "aos/dist/aos.css";
 import classNames from "classnames";
 import React from "react";
 import { tinaField } from "tinacms/dist/react";

components/blocks/testimonialsCard.tsx

@@ -4,6 +4,7 @@ import dynamic from "next/dynamic";
 import { useState } from "react";
 import { TestimonialType } from "../../helpers/getTestimonials";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 
 const Image = dynamic(() => import("next/image"));
 
@@ -23,6 +24,7 @@ export const TestimonialCard = ({ testimonial }: TestimonialCardProps) => {
       data-aos="flip-right"
       key={testimonial?.name}
     >
+      <AosLoader />
       <div className="flex flex-col items-center">
         <Image
           alt={`Avatar of ${testimonial?.name}`}

components/blocks/youtubePlaylist.tsx

@@ -6,6 +6,7 @@ import { BsArrowRightCircle } from "react-icons/bs";
 import { tinaField } from "tinacms/dist/react";
 import { VideoLink } from "../../services/server/youtube";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import { VideoCard } from "../util/videoCards";
 
 export type YoutubePlaylistProps = {
@@ -71,6 +72,7 @@ export const YoutubePlaylistBlock: React.FC<YoutubePlaylistProps> = (props) => {
             data-aos={playlistButton.animated ? "fade-up" : undefined}
             data-tina-field={tinaField(props.playlistButton, "text")}
           >
+            {playlistButton.animated && <AosLoader />}
             {playlistButton.text}
             <BsArrowRightCircle className="ml-1 inline" />
           </CustomLink>

components/button/utilityButton.tsx

@@ -5,6 +5,7 @@ import { JSX } from "react";
 import { BsArrowLeftCircle, BsArrowRightCircle } from "react-icons/bs";
 import type { Template } from "tinacms";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import Button from "./rippleButton";
 
 const sizes = {
@@ -64,6 +65,7 @@ export const UtilityButton = ({
       onClick={() => !disabled && onClick()}
       data-aos={animated ? "fade-up" : undefined}
     >
+      {animated && <AosLoader />}
       {buttonText}
       {btnIcon && iconMapper(btnIcon)}
     </Button>

components/consulting/mediaCard/mediaCard.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { FC } from "react";
 import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
+import AosLoader from "../../util/aosLoader";
 
 export type MediaCardProps = {
   type: "video" | "blog";
@@ -22,6 +23,7 @@ const MediaCard: FC<MediaCardProps> = ({ type, content }) => {
         bgImagesClasses[type]
       )}
     >
+      <AosLoader />
       <TinaMarkdown content={content} />
     </div>
   );

components/liveStream/liveStreamWidget.tsx

@@ -17,6 +17,7 @@ import layoutData, {
 import { LiveStreamProps } from "../../hooks/useLiveStreamProps";
 import { VideoEmbed } from "../blocks/videoEmbed";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import { InlineJotForm } from "../inlineJotForm/inlineJotForm";
 import { SocialIcons } from "../socialIcons/socialIcons";
 
@@ -147,6 +148,7 @@ export const LiveStreamWidget = ({ isLive, event }: LiveStreamWidgetProps) => {
             data-aos-anchor="#thumbnailAnchor"
             data-aos-anchor-placement="bottom-top"
           >
+            <AosLoader />
             <VideoEmbed
               data={{
                 url: youtubeUrls.videoUrl,

components/technologyCard/technologyCard.tsx

@@ -3,6 +3,7 @@ import { FC } from "react";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import { TechnologyCardProps } from "./technologyCardTypes";
 
 const Image = dynamic(() => import("next/image"));
@@ -14,6 +15,7 @@ const TechnologyCard: FC<TechnologyCardProps> = (props) => {
       className="mx-3.5 mb-15 mt-5 flex h-full flex-col border-b-2 border-solid border-sswRed bg-gray-75 px-8 py-11"
       data-aos="flip-left"
     >
+      <AosLoader />
       {thumbnail ? (
         <figure
           className="relative h-24 px-8"

components/training/presenterBlock.tsx

@@ -4,11 +4,13 @@ import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { presenterSchemaConstants } from "../../tina/collections/presenter"; // TODO: Use alias - https://github.com/tinacms/tinacms/issues/4488
 import { CustomLink } from "../customLink";
+import AosLoader from "../util/aosLoader";
 import { Container } from "../util/container";
 
 export const PresenterBlock = ({ data }) => {
   return (
     <Container size="custom">
+      <AosLoader />
       <h2
         className="mb-12 text-center"
         data-tina-field={tinaField(data, presenterBlockConstant.header)}

components/util/aosLoader.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import "aos/dist/aos.css";
+import { useEffect } from "react";
+
+// Loads and initialises AOS only where a component actually renders data-aos
+// elements, instead of on every page. Renders nothing.
+let initialised = false;
+
+export const AosLoader = () => {
+  useEffect(() => {
+    let cancelled = false;
+
+    void import("aos").then((mod) => {
+      if (cancelled) return;
+      const AOS = mod.default;
+      if (!initialised) {
+        AOS.init({ duration: 1200, once: true });
+        initialised = true;
+      }
+      AOS.refresh();
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return null;
+};
+
+export default AosLoader;

components/util/consulting/benefits.tsx

@@ -3,6 +3,7 @@ import dynamic from "next/dynamic";
 import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { CustomLink } from "../../customLink";
+import AosLoader from "../aosLoader";
 
 const Image = dynamic(() => import("next/image"));
 
@@ -68,6 +69,7 @@ export const Benefits = ({ data }) => {
 
   return (
     <article>
+      <AosLoader />
       <section className="grid sm:grid-cols-1 md:grid-cols-2">
         {benefitList?.map((benefit, index) => {
           return (

components/util/videoCards.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { FC } from "react";
 import Button from "../button/rippleButton";
 import { VideoModal } from "../videoModal";
+import AosLoader from "./aosLoader";
 import { Container } from "./container";
 import { Section } from "./section";
 
@@ -110,6 +111,7 @@ const VideoCards = ({
               window.open(channelLink || defaultChannelLink, "_blank")
             }
           >
+            <AosLoader />
             <span className="px-7">Watch More Videos</span>
           </Button>
         </div>