housekeeping on login code, making login feels more smooth

src/components/hoc/withProtectedRoute.tsx

@@ -1,7 +1,7 @@
 import { ComponentType, useEffect, useRef } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { useSignalEffect } from "@preact/signals-react/runtime";
-import { Spinner } from "~/components/ui";
+import { LoadingSpinner } from "~/components/ui";
 import { authentication } from "~/signals";
 
 export const withProtectionRoute = <P extends object>(
@@ -26,7 +26,7 @@ export const withProtectionRoute = <P extends object>(
     ) {
       return (
         <div className="fixed flex h-full w-full flex-col items-center justify-center">
-          <Spinner />
+          <LoadingSpinner isShowing={true} message="Loading..." />
         </div>
       );
     }
@@ -57,7 +57,7 @@ const RedirectToLogin = () => {
   }, [navigate, pathname]);
   return (
     <div className="fixed flex h-full w-full flex-col items-center justify-center">
-      <Spinner />
+      <LoadingSpinner isShowing={true} message="Loading...." />
     </div>
   );
 };

src/components/ui/LoadingSpinner.tsx

@@ -25,7 +25,7 @@ export const LoadingSpinner = ({
           "data-[leave]:duration-300",
         )}
       >
-        <Spinner className="size-20" />
+        <Spinner className="size-10" />
         {message && <label>{message}</label>}
       </div>
     </Transition>

src/pages/login.tsx

@@ -22,11 +22,11 @@ export const Login = () => {
 
   const authLoaderMessage = getAuthLoaderMessage();
   const shouldShowLoader = checkShouldShowLoader();
-  // const showNoAccessModal = authStatus.value === AUTH_STATUS.NO_ACCESS;
   function checkShouldShowLoader() {
     return (
       authStatus.value === AUTH_STATUS.LOGGING ||
-      authStatus.value === AUTH_STATUS.LOGGED_IN
+      authStatus.value === AUTH_STATUS.LOGGED_IN ||
+      authStatus.value === AUTH_STATUS.GET_USER_INFO
     );
   }
   function getAuthLoaderMessage() {
@@ -38,11 +38,6 @@ export const Login = () => {
     }
     return "Getting Session...";
   }
-  // const handleClose = () => {
-  //   if (authentication.status.value !== AUTH_STATUS.LOGGED_OUT) {
-  //     logout();
-  //   }
-  // };
 
   const handleOnSumbit = (ev: React.FormEvent<HTMLFormElement>) => {
     ev.preventDefault();
@@ -119,29 +114,9 @@ export const Login = () => {
         </form>
         {shouldShowLoader && (
           <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center">
-            <LoadingSpinner
-              isShowing={shouldShowLoader}
-              message={authLoaderMessage}
-            />
+            <LoadingSpinner isShowing={true} message={authLoaderMessage} />
           </div>
         )}
-
-        {/*
-        <ConfirmationModal
-          text="We're in a closed beta and you'll need a beta key to use this app."
-          title="Unauthorized"
-          open={showNoAccessModal}
-          onClose={handleClose}
-          cancelText="Close"
-          onCancel={handleClose}
-          okText="Get Beta Key"
-          onOk={() => {
-            handleClose();
-            if (window) {
-              window.open("https://storyteller.ai/beta-key/redeem", "_blank");
-            }
-          }} 
-        />*/}
       </div>
     </div>
   );