fix: common loader styles

services/frontend/src/App.tsx

@@ -39,6 +39,11 @@ export default function App() {
     authenticationPath: "/login"
   };
 
+  const setViewHeight = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+  };
+
   useEffect(() => {
     if (isAuthenticated) {
       self()
@@ -83,6 +88,19 @@ export default function App() {
     }
   }, [dispatch, isAuthenticated]);
 
+  useEffect(() => {
+    const handler = () => {
+      setViewHeight();
+    };
+
+    window.addEventListener("resize", handler);
+    setViewHeight();
+
+    return () => {
+      window.removeEventListener("resize", handler);
+    };
+  }, []);
+
   return (
     <CssVarsProvider theme={lightTheme}>
       <QueryClientProvider client={queryClient}>

services/frontend/src/components/Auth/GitHub/index.tsx

@@ -59,7 +59,7 @@ const GitHub = (props: IGitHubProps) => {
       <div className="flex">
         {loading && (
           <div className="flex flex-row items-center space-x-2">
-            <Spinner className="w-6 h-6 text-blue-600" />
+            <Spinner className="w-4 h-4 text-blue-600" />
             <span className="text-base text-gray-800">logging in...</span>
           </div>
         )}

services/frontend/src/components/Auth/Login/index.tsx

@@ -142,7 +142,7 @@ const Login = (props: IProfileProps) => {
                 className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-2.5 py-1.5 bg-green-600 text-sm font-medium text-white hover:bg-green-700 sm:w-auto text-sm"
               >
                 <div className="flex justify-center items-center space-x-2">
-                  {loggingIn && <Spinner className="w-5 h-5 text-green-300" />}
+                  {loggingIn && <Spinner className="w-4 h-4 text-green-300" />}
                   <span>Login</span>
                 </div>
               </button>

services/frontend/src/components/Auth/Signup/index.tsx

@@ -210,7 +210,7 @@ const Signup = (props: IProfileProps) => {
                 className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-2.5 py-1.5 bg-green-600 text-sm font-medium text-white hover:bg-green-700 sm:w-auto text-sm"
               >
                 <div className="flex justify-center items-center space-x-2">
-                  {signingUp && <Spinner className="w-5 h-5 text-green-300" />}
+                  {signingUp && <Spinner className="w-4 h-4 text-green-300" />}
                   <span>Signup</span>
                 </div>
               </button>

services/frontend/src/components/Project/index.tsx

@@ -151,11 +151,6 @@ export default function Project(props: IProjectProps) {
     }
   };
 
-  const setViewHeight = () => {
-    const vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty("--vh", `${vh}px`);
-  };
-
   const copy = () => {
     navigator.clipboard.writeText(formattedCode);
     setCopyText("Copied");
@@ -232,19 +227,6 @@ export default function Project(props: IProjectProps) {
     setCanvasPosition({ ...canvasPosition, ...updatedCanvasPosition });
   };
 
-  useEffect(() => {
-    const handler = () => {
-      setViewHeight();
-    };
-
-    window.addEventListener("resize", handler);
-    setViewHeight();
-
-    return () => {
-      window.removeEventListener("resize", handler);
-    };
-  }, []);
-
   const onAddEndpoint = (values: any) => {
     const sections = flattenLibraries(nodeLibraries);
     const clientNodeItem = getClientNodeItem(

services/frontend/src/components/Projects/index.tsx

@@ -77,12 +77,6 @@ const Projects = () => {
             </div>
 
             <div className="px-4 sm:px-6 md:px-8">
-              {(isFetching || isLoading) && (
-                <div className="flex justify-center items-center mx-auto mt-10">
-                  <Spinner className="w-6 h-6 text-blue-600" />
-                </div>
-              )}
-
               {!isFetching && !isLoading && (
                 <>
                   <div className="py-4">
@@ -187,6 +181,12 @@ const Projects = () => {
           </div>
         </main>
       </div>
+
+      {(isFetching || isLoading) && (
+        <div className="flex items-center justify-center items-stretch min-h-screen align-middle">
+          <Spinner className="w-4 h-4 m-auto dark:text-blue-400 text-blue-600"></Spinner>
+        </div>
+      )}
     </>
   );
 };