From 458750e6f66c78b48c99877b6fdc96404b3e4a62 Mon Sep 17 00:00:00 2001
From: corpulent <artemgolub@gmail.com>
Date: Sat, 20 Aug 2022 00:09:28 +0300
Subject: [PATCH 1/2] fix: common loader styles

---
 services/frontend/src/App.tsx                  | 18 ++++++++++++++++++
 .../src/components/Auth/GitHub/index.tsx       |  2 +-
 .../src/components/Auth/Login/index.tsx        |  2 +-
 .../src/components/Auth/Signup/index.tsx       |  2 +-
 .../frontend/src/components/Project/index.tsx  | 18 ------------------
 .../frontend/src/components/Projects/index.tsx | 12 ++++++------
 6 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx
index 4e6d65b..d3b74d0 100644
--- a/services/frontend/src/App.tsx
+++ b/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}>
diff --git a/services/frontend/src/components/Auth/GitHub/index.tsx b/services/frontend/src/components/Auth/GitHub/index.tsx
index 5e0562b..382ef4d 100644
--- a/services/frontend/src/components/Auth/GitHub/index.tsx
+++ b/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>
         )}
diff --git a/services/frontend/src/components/Auth/Login/index.tsx b/services/frontend/src/components/Auth/Login/index.tsx
index 45adf81..32ec0d8 100644
--- a/services/frontend/src/components/Auth/Login/index.tsx
+++ b/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>
diff --git a/services/frontend/src/components/Auth/Signup/index.tsx b/services/frontend/src/components/Auth/Signup/index.tsx
index 21796fd..07de169 100644
--- a/services/frontend/src/components/Auth/Signup/index.tsx
+++ b/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>
diff --git a/services/frontend/src/components/Project/index.tsx b/services/frontend/src/components/Project/index.tsx
index db43121..cfcbd0e 100644
--- a/services/frontend/src/components/Project/index.tsx
+++ b/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(
diff --git a/services/frontend/src/components/Projects/index.tsx b/services/frontend/src/components/Projects/index.tsx
index 11e1ff4..2734295 100644
--- a/services/frontend/src/components/Projects/index.tsx
+++ b/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>
+      )}
     </>
   );
 };

From 8b003d4940918df8332cc3b2a5f36a5f3d3ecfb6 Mon Sep 17 00:00:00 2001
From: corpulent <artemgolub@gmail.com>
Date: Sat, 20 Aug 2022 22:54:47 +0300
Subject: [PATCH 2/2] fix: remove unnecessary function

---
 services/frontend/src/App.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/services/frontend/src/App.tsx b/services/frontend/src/App.tsx
index d3b74d0..1795f05 100644
--- a/services/frontend/src/App.tsx
+++ b/services/frontend/src/App.tsx
@@ -89,15 +89,11 @@ export default function App() {
   }, [dispatch, isAuthenticated]);
 
   useEffect(() => {
-    const handler = () => {
-      setViewHeight();
-    };
-
-    window.addEventListener("resize", handler);
     setViewHeight();
+    window.addEventListener("resize", setViewHeight);
 
     return () => {
-      window.removeEventListener("resize", handler);
+      window.removeEventListener("resize", setViewHeight);
     };
   }, []);