WG309 Improve loading transition

weaveworks · Feb 21, 2022 · 029aecb · 029aecb
1 parent 4473d2e
commit 029aecb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 30 deletions.
diff --git a/ui/contexts/AuthContext.tsx b/ui/contexts/AuthContext.tsx
@@ -3,31 +3,22 @@ import LoadingPage from "../components/LoadingPage";
 import { AuthSwitch } from "./AutoSwitch";
 import { useHistory } from "react-router-dom";
 import Layout from "../components/Layout";
-import { SignInPageWrapper } from "../pages/SignIn";
 
 const USER_INFO = "/oauth2/userinfo";
 const SIGN_IN = "/oauth2/sign_in";
 
-const Loader: React.FC<{ loading?: boolean }> = ({
-  children,
-  loading = true,
-}) => {
-  const history = useHistory();
-  const {
-    location: { pathname },
-  } = history;
-
-  const loader =
-    pathname === "/sign_in" ? (
-      <SignInPageWrapper>
-        <LoadingPage />
-      </SignInPageWrapper>
-    ) : (
-      <Layout>
-        <LoadingPage />
-      </Layout>
-    );
-  return <>{loading ? loader : children}</>;
+const Loader: React.FC<{ loading?: boolean }> = ({ children, loading }) => {
+  return (
+    <>
+      {loading ? (
+        <Layout>
+          <LoadingPage />
+        </Layout>
+      ) : (
+        children
+      )}
+    </>
+  );
 };
 
 export type AuthContext = {
@@ -37,6 +28,7 @@ export type AuthContext = {
     groups: string[];
   };
   error: { status: number; statusText: string };
+  loading: boolean;
 };
 
 export const Auth = React.createContext<AuthContext | null>(null);
@@ -92,11 +84,14 @@ export default function AuthContextProvider({ children }) {
         signIn,
         userInfo,
         error,
+        loading,
       }}
     >
-      <Loader loading={loading}>
-        {userInfo?.email ? children : <AuthSwitch />}
-      </Loader>
+      {userInfo?.email ? (
+        <Loader loading={loading}>{children}</Loader>
+      ) : (
+        <AuthSwitch />
+      )}
     </Auth.Provider>
   );
 }
diff --git a/ui/pages/SignIn.tsx b/ui/pages/SignIn.tsx
@@ -10,7 +10,7 @@ import SignInBackground from "./../images/SignInBackground.svg";
 import WeaveLogo from "./../images/WeaveLogo.svg";
 import Button from "../components/Button";
 import { Auth } from "../contexts/AuthContext";
-import { TextField, Divider } from "@material-ui/core";
+import { TextField, Divider, CircularProgress } from "@material-ui/core";
 import Alert from "../components/Alert";
 
 export const SignInPageWrapper = styled(Flex)`
@@ -61,7 +61,7 @@ const AlertWrapper = styled(Alert)`
 
 function SignIn() {
   const formRef = React.useRef<HTMLFormElement>();
-  const { signIn, error } = React.useContext(Auth);
+  const { signIn, error, loading } = React.useContext(Auth);
   const [password, setPassword] = React.useState<string>("");
 
   const handleOIDCSubmit = () => {
@@ -117,14 +117,21 @@ function SignIn() {
                 id="password"
                 label="Password"
                 variant="standard"
-                // type="password"
+                type="password"
                 value={password}
               />
             </FormElement>
             <Flex center>
-              <Button type="submit" style={{ marginTop: theme.spacing.medium }}>
-                CONTINUE
-              </Button>
+              {!loading ? (
+                <Button
+                  type="submit"
+                  style={{ marginTop: theme.spacing.medium }}
+                >
+                  CONTINUE
+                </Button>
+              ) : (
+                <CircularProgress />
+              )}
             </Flex>
           </form>
         </div>