feat: adjust the display of loading ui to menu buttons

moonbamijam · Jun 29, 2024 · 182f54a · 182f54a
1 parent fd4d460
commit 182f54a
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/components/buttons/NavMenuBtn.tsx b/components/buttons/NavMenuBtn.tsx
@@ -49,7 +49,7 @@ export default function NavMenuBtn() {
           )}
         </Button>
       ) : (
-        <div className="fixed left-8 bottom-8 sm:left-12 sm:bottom-12 lg:left-24 lg:bottom-16 w-[50px] h-[50px] text-xl z-[100] flex justify-center items-center rounded-full">
+        <div className="fixed lg:hidden left-8 bottom-8 sm:left-12 sm:bottom-12 lg:left-24 lg:bottom-16 w-[50px] h-[50px] text-xl z-[100] flex justify-center items-center rounded-full">
           <LoadingSpinner size="40px" fontSizes="text-xl xl:text-2xl" />
         </div>
       )}

diff --git a/components/header/Header.tsx b/components/header/Header.tsx
@@ -95,7 +95,7 @@ export default function Header() {
               )}
             </Button>
           ) : (
-            <LoadingSpinner size="40px" fontSizes="text-xl xl:text-2xl" />
+            <LoadingSpinner size="40px" fontSizes="text-xl xl:text-2xl" className="hidden lg:flex" />
           )}
           <ThemeSwitchBtn />
         </nav>

diff --git a/components/ui/LoadingSpinner.tsx b/components/ui/LoadingSpinner.tsx
@@ -4,16 +4,18 @@ type LoadingSpinnerProps = {
   size?: string;
   fontSize?: string;
   fontSizes?: string;
+  className?: string;
 };
 
 export default function LoadingSpinner({
   size,
   fontSize,
   fontSizes,
+  className,
 }: LoadingSpinnerProps) {
   return (
     <div
-      className={`relative w-[${size}] h-[${size}] flex items-center justify-center rounded-full [&>svg>path]:text-[${fontSize}] ${fontSizes}`}
+      className={`relative w-[${size}] h-[${size}] flex items-center justify-center rounded-full [&>svg>path]:text-[${fontSize}] ${fontSizes} ${className}`}
     >
       <div className="absolute opacity-30">
         <AiOutlineLoading3Quarters className="[&>path]:text-surface" />