fix(design-system-components): Resolved issue displaying icon animations

apps/web/shell/app/page.tsx

@@ -60,7 +60,7 @@ export default function Page() {
                 className="h-full min-h-[8rem] hover:cursor-pointer"
                 title="Contact"
                 details="Reach out to me for anything and everything"
-                iconType="postbox"
+                iconType="post-box"
               />
               <Card
                 className="h-full min-h-[8rem] hover:cursor-pointer"

design-system/components/src/icon/Icon.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import Lottie from "react-lottie";
+import type { AnimationItem, LottiePlayer } from "lottie-web";
+import { useEffect, useRef, useState } from "react";
 import { PropsWithBase } from "../types";
+import { IconTypes } from "./Icon.types";
 
 export type IconProps = PropsWithBase<{
   /**
@@ -21,42 +22,67 @@ export const Icon = ({
   type,
   loop = false,
   autoplay = false,
+  isStopped,
   ...props
 }: IconProps) => {
-  const [animationData, setAnimationData] = useState<any>(null);
+  const ref = useRef<HTMLDivElement>(null);
+  const [lottie, setLottie] = useState<LottiePlayer | null>(null);
+  const [animation, setAnimation] = useState<AnimationItem | null>(null);
 
-  useEffect(() => {
-    if (type) {
-      setAnimationData(null /*getIconData(type)*/);
-    }
-
-    /*async function fetchData() {
-      if (type) {
-        const data = await getIconData(type);
-
-        if (data) {
-          setAnimationData(data);
-        }
-      }
-    }
-    fetchData();*/
-  }, [type]);
-
-  if (!animationData) {
-    return <p>Loading...</p>;
+  let path = null;
+  if (type === IconTypes.DOWNLOAD) {
+    path = "/static/icons/download.json";
+  } else if (type === IconTypes.PENCIL) {
+    path = "/static/icons/pencil.json";
+  } else if (type === IconTypes.WRENCH) {
+    path = "/static/icons/wrench.json";
+  } else if (type === IconTypes.BELL) {
+    path = "/static/icons/bell.json";
+  } else if (type === IconTypes.LIST) {
+    path = "/static/icons/list.json";
+  } else if (type === IconTypes.ERROR_ALERT) {
+    path = "/static/icons/error-alert.json";
+  } else if (type === IconTypes.ARROW) {
+    path = "/static/icons/arrow.json";
+  } else if (type === IconTypes.POST_BOX) {
+    path = "/static/icons/post-box.json";
   }
 
-  return (
-    <Lottie
-      {...props}
-      options={{
+  useEffect(() => {
+    import("lottie-web").then(Lottie => setLottie(Lottie.default));
+  }, []);
+
+  useEffect(() => {
+    if (lottie && ref.current) {
+      const nextAnimation = lottie.loadAnimation({
+        ...props,
+        container: ref.current,
+        renderer: "svg",
         loop,
         autoplay,
-        animationData,
         rendererSettings: {
           preserveAspectRatio: "xMidYMid slice",
         },
-      }}
-    />
-  );
+        path,
+      });
+      setAnimation(nextAnimation);
+
+      return () => {
+        nextAnimation.destroy();
+        setAnimation(null);
+      };
+    }
+  }, [lottie]);
+
+  useEffect(() => {
+    if (animation) {
+      if (!isStopped) {
+        animation.play();
+      } else {
+        animation.stop();
+      }
+    }
+  }, [animation, isStopped]);
+
+  return <div ref={ref} />;
 };

design-system/components/src/icon/Icon.utils.ts

@@ -9,14 +9,14 @@ import Wrench from "../../assets/icons/wrench.json";
 
 import { IconTypes } from "./Icon.types";
 
-/*const Download = dynamic(() => import("../../assets/icons/download.json"));
+const Download = dynamic(() => import("../../assets/icons/download.json"));
 const Pencil = dynamic(() => import("../../assets/icons/pencil.json"));
 const Wrench = dynamic(() => import("../../assets/icons/wrench.json"));
 const Bell = dynamic(() => import("../../assets/icons/bell.json"));
 const List = dynamic(() => import("../../assets/icons/list.json"));
 const ErrorAlert = dynamic(() => import("../../assets/icons/error-alert.json"));
 const Arrow = dynamic(() => import("../../assets/icons/arrow.json"));
-const PostBox = dynamic(() => import("../../assets/icons/post-box.json"));*/
+const PostBox = dynamic(() => import("../../assets/icons/post-box.json"));
 
 export const getIconData = async (iconType: string) => {
   if (iconType === IconTypes.DOWNLOAD) {

design-system/components/src/icon/IconWrapper.tsx

@@ -3,7 +3,14 @@ import { Icon, IconProps } from "./Icon";
 
 export default function IconWrapper(props: IconProps) {
   return (
-    <Suspense fallback={<p>Loading...</p>}>
+    <Suspense fallback={<div className="flex items-center h-full"><svg className="h-2/3 w-2/3 animate-spin m-auto" viewBox="3 3 18 18">
+    <path
+      className="fill-gray-200"
+      d="M12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5ZM3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12Z"></path>
+    <path
+      className="fill-gray-800"
+      d="M16.9497 7.05015C14.2161 4.31648 9.78392 4.31648 7.05025 7.05015C6.65973 7.44067 6.02656 7.44067 5.63604 7.05015C5.24551 6.65962 5.24551 6.02646 5.63604 5.63593C9.15076 2.12121 14.8492 2.12121 18.364 5.63593C18.7545 6.02646 18.7545 6.65962 18.364 7.05015C17.9734 7.44067 17.3403 7.44067 16.9497 7.05015Z"></path>
+  </svg></div>}>
       <Icon {...props} />
     </Suspense>
   );

libs/core/typescript/components/src/linkedin-link/LinkedInLink.tsx

@@ -11,7 +11,7 @@ export function LinkedInLink({ className, ...props }: BaseComponentProps) {
       inNewTab={true}
       href="https://www.linkedin.com/in/patrick-sullivan-865526b0">
       <svg
-        className="h-[5rem] w-[5rem] fill-primary opacity-100 transition-all hover:translate-y-0.5 hover:scale-110 hover:fill-highlight-1"
+        className="h-[6rem] w-[6rem] fill-primary opacity-100 transition-all hover:translate-y-0.5 hover:scale-110 hover:fill-highlight-1"
         viewBox="0 0 100 100"
         width="100px"
         height="100px">

libs/core/typescript/components/src/medium-link/MediumLink.tsx

@@ -11,7 +11,7 @@ export function MediumLink({ className, ...props }: BaseComponentProps) {
       inNewTab={true}
       href="https://github.com/sullivanpj">
       <svg
-        className="h-[5rem] w-[5rem] fill-primary opacity-100 transition-all hover:translate-y-0.5 hover:scale-110 hover:fill-highlight-1"
+        className="h-[6rem] w-[5rem] fill-primary opacity-100 transition-all hover:translate-y-0.5 hover:scale-110 hover:fill-highlight-1"
         viewBox="0 0 100 100"
         width="100px"
         height="100px">

libs/shared/typescript/components/src/navigation-menu/NavigationMenu.tsx

@@ -159,7 +159,7 @@ export function NavigationMenu({
         {/*<Link href="/contact">*/}
           <Button
             className="w-8"
-            variant={ButtonVariants.PRIMARY}
+            variant={ButtonVariants.GRADIENT}
             glowType={ButtonGlowTypes.ALWAYS}
             rounding={ButtonCornerRoundingTypes.FULL}