feat: new styling to loading spinner ux component

app/loading.tsx

@@ -1,13 +1,11 @@
-import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import LoadingSpinner from "@components/ux/LoadingSpinner";
 
 const Loading = () => {
   return (
-    <div className="text-5xl lg:text-6xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2  rounded-full w-max p-5 bg-rich-black dark:bg-transparent">
-      <div className="animate-spin">
-        <AiOutlineLoading3Quarters />
-      </div>
+    <div className="text-5xl lg:text-6xl absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2  rounded-full w-max p-5">
+      <LoadingSpinner size="100px" textSize="6xl" />
     </div>
-  )
-}
+  );
+};
 
-export default Loading;
+export default Loading;

components/buttons/ThemeSwitchBtn.tsx

@@ -4,6 +4,7 @@ import { MouseEventHandler, ReactNode, useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 import { FiSun, FiMoon } from "react-icons/fi";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
+import LoadingSpinner from "@components/ux/LoadingSpinner";
 
 type Props = {
   onClick?: MouseEventHandler;
@@ -17,14 +18,7 @@ export default function ThemeSwitchBtn() {
   useEffect(() => setMounted(true), []);
 
   if (!mounted)
-    return (
-      <button
-        aria-label="loading-theme-switch"
-        className="rounded-full w-[40px] h-[40px] flex items-center justify-center text-xl xl:text-2xl dark:hover:bg-highlight animate-spin"
-      >
-        <AiOutlineLoading3Quarters />
-      </button>
-    );
+    return <LoadingSpinner size="40px" textSizes="text-xl xl:text-2xl" />;
 
   if (resolvedTheme === "dark") {
     return <Button onClick={() => setTheme("light")} icon={<FiSun />} />;
@@ -38,7 +32,7 @@ const Button = ({ onClick, icon }: Props) => {
     <button
       aria-label="theme-switch"
       onClick={onClick}
-      className="rounded-full w-[40px] h-[40px] flex items-center justify-center text-xl hover:shadow-md hover:shadow-gray-500 dark:hover:bg-highlight hover:rotate-45"
+      className="rounded-full w-[40px] h-[40px] flex items-center justify-center text-xl hover:shadow-md hover:shadow-gray-500 hover:bg-white dark:hover:bg-highlight hover:rotate-45 transform active:scale-75"
     >
       {icon}
     </button>

components/sections/AboutSection.tsx

@@ -26,7 +26,7 @@ export default async function AboutSection() {
           languages={about.languages}
         />
       ));
-    } else return <LoadingSpinner />;
+    } else return <LoadingSpinner size="100px" textSize="6xl" />;
   };
 
   return (

components/sections/ProjectSection.tsx

@@ -25,7 +25,7 @@ export default async function ProjectSection() {
           github={project.github}
         />
       ));
-    } else return <LoadingSpinner />;
+    } else return <LoadingSpinner size="100px" textSize="6xl" />;
   };
 
   return (

components/sections/TopicSection.tsx

@@ -13,7 +13,7 @@ export default async function TopicSection() {
       return topics.map((topic: TopicType) => (
         <Topic key={topic._id} title={topic.title} desc={topic.desc} />
       ));
-    } else return <LoadingSpinner />;
+    } else return <LoadingSpinner size="100px" textSize="6xl" />;
   };
 
   return (

components/ux/LoadingSpinner.tsx

@@ -1,9 +1,29 @@
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
-export default function LoadingSpinner() {
+type LoadingSpinnerProps = {
+  size?: string;
+  textSize?: string;
+  textSizes?: string;
+};
+
+export default function LoadingSpinner({
+  size,
+  textSize,
+  textSizes,
+}: LoadingSpinnerProps) {
   return (
-    <div className="text-6xl flex items-center justify-center rounded-full bg-rich-black dark:bg-transparent animate-spin">
-      <AiOutlineLoading3Quarters />
+    <div
+      className={`relative w-[${size}] h-[${size}] ${
+        "text-" + [textSize]
+      } ${textSizes} flex items-center justify-center rounded-full`}
+    >
+      <div className="absolute opacity-30">
+        <AiOutlineLoading3Quarters className="[&>path]:text-white" />
+      </div>
+      <div className="absolute opacity-30 rotate-90">
+        <AiOutlineLoading3Quarters className="[&>path]:text-white" />
+      </div>
+      <AiOutlineLoading3Quarters className="animate-spin duration-500 [&>path]:text-highlight" />
     </div>
   );
-} 
+}