feat: updated lotties for the products

frontend/src/components/v2/Button/Button.tsx

@@ -2,6 +2,8 @@ import { ButtonHTMLAttributes, forwardRef, ReactNode } from "react";
 import { cva, VariantProps } from "cva";
 import { twMerge } from "tailwind-merge";
 
+import { Lottie } from "../Lottie";
+
 type Props = {
   children: ReactNode;
   isDisabled?: boolean;
@@ -189,11 +191,14 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {isLoading && (
-          <img
-            src="/images/loading/loading.gif"
-            width={36}
-            alt="loading animation"
-            className="absolute rounded-xl opacity-80"
+          <Lottie
+            icon={
+              variant === "solid" && colorSchema === "primary"
+                ? "infisical_loading_bw"
+                : "infisical_loading"
+            }
+            isAutoPlay
+            className="absolute w-8 rounded-xl opacity-80 shadow-sm"
           />
         )}
         {leftIcon && (

frontend/src/components/v2/ContentLoader/ContentLoader.tsx

@@ -5,6 +5,8 @@ import { useEffect, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { twMerge } from "tailwind-merge";
 
+import { Lottie } from "../Lottie";
+
 type Props = {
   text?: string | string[];
   frequency?: number;
@@ -31,14 +33,7 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
         className
       )}
     >
-      <img
-        src="/images/loading/loading.gif"
-        height={70}
-        width={120}
-        alt="loading animation"
-        decoding="async"
-        loading="lazy"
-      />
+      <Lottie icon="infisical_loading" className="h-32 w-32" />
       {text && isTextArray && (
         <AnimatePresence mode="wait">
           <motion.div

frontend/src/components/v2/Lottie/Lottie.tsx

@@ -7,10 +7,11 @@ export type LottieProps = {
   icon?: string;
   iconMode?: Mode;
   className?: string;
+  isAutoPlay?: boolean;
 };
 
 export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
-  ({ children, icon, iconMode, ...props }, ref): JSX.Element => {
+  ({ children, icon, iconMode, isAutoPlay, ...props }, ref): JSX.Element => {
     const iconRef = useRef<DotLottie | null>(null);
     return (
       <div
@@ -26,6 +27,7 @@ export const Lottie = forwardRef<HTMLDivElement, LottieProps>(
           mode={iconMode}
           src={`/lotties/${icon}.json`}
           loop
+          autoplay={isAutoPlay}
           className="h-full w-full"
         />
         {children}