feat: do not load local graphs until firebase auth is resolved

src/components/authentication/authentication.component.js

@@ -13,7 +13,7 @@ export default function Authentication({ setAuth, setAuthProvider, isSignedIn, i
   const [error, setError] = useState(false);
   useEffect(() => {
     if (!authProvider) {
-      initializeAuthProvider(({ id, name, imageUrl }) => setAuth(id, name, imageUrl), setAuthProvider);
+      initializeAuthProvider(({ id, name, imageUrl }) => setAuth(id, name, imageUrl), setAuth, setAuthProvider);
     }
   }, [authProvider, setAuth, setAuthProvider]);
   if (!isSignedIn) {

src/ducks/auth.duck.js

@@ -4,6 +4,7 @@ export const AUTH_UNSET = 'grapher/Auth/UNSET';
 
 const initialState = {
   signedIn: false,
+  initialized: false,
 };
 
 export default function reducer(state = initialState, action) {
@@ -19,7 +20,8 @@ export default function reducer(state = initialState, action) {
       const { id, name, imageUrl } = action.payload;
       return {
         ...state,
-        signedIn: true,
+        initialized: true,
+        signedIn: !!id,
         id,
         name,
         imageUrl,
@@ -89,3 +91,7 @@ export function getAuthProvider(state) {
 export function getId(state) {
   return authSelector(state).id;
 }
+
+export function isInitialized(state) {
+  return authSelector(state).initialized;
+}

src/scenes/welcome/welcome.component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from 'react';
+import React, { forwardRef } from 'react';
 
 import { Link as RouterLink } from 'react-router-dom';
 import AppBar from '@material-ui/core/AppBar';
@@ -15,6 +15,7 @@ import { withStyles, useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import Zoom from '@material-ui/core/Zoom';
+import Skeleton from '@material-ui/lab/Skeleton';
 
 import NewGraphDialog from './new-graph';
 import GraphCard from './graph-card';
@@ -53,13 +54,54 @@ const styles = (theme) => ({
   },
 });
 
-function Welcome({ openNewGraph, openGraph, graphNames, openImportGraph, readNames, classes }) {
+function GridListWrapper({ className, children }) {
   const theme = useTheme();
   const bigScreen = useMediaQuery(theme.breakpoints.up('md'));
-  useEffect(() => {
-    readNames();
-  }, [readNames]);
+  return (
+    <GridList cellHeight={320} cols={bigScreen ? 3 : 2} className={className}>
+      {children}
+    </GridList>
+  );
+}
+
+function SkeletonGraphs({ show, className }) {
+  if (!show) {
+    return null;
+  }
+  return (
+    <GridListWrapper className={className}>
+      {new Array(5).fill(undefined).map((_, index) => (
+        <GridListTile key={index} cols={1}>
+          <Skeleton variant="rect" width="100%" height={260} />
+        </GridListTile>
+      ))}
+    </GridListWrapper>
+  );
+}
+
+function GraphCards({ show, graphNames, openNewGraph, openGraph, className }) {
+  if (!show) {
+    return null;
+  }
+  return (
+    <GridListWrapper className={className}>
+      {graphNames.map(([graphId, graphName], index) => (
+        <Zoom key={graphId} in={true} style={{ transitionDelay: `${index * 250 + 250}ms` }}>
+          <GridListTile cols={1}>
+            <GraphCard graphId={graphId} graphName={graphName} onOpen={() => openGraph(graphId)} />
+          </GridListTile>
+        </Zoom>
+      ))}
+      <Zoom in={true} style={{ transitionDelay: `${graphNames.length * 250 + 250}ms` }}>
+        <GridListTile key="new" cols={1}>
+          <NewGraphCard onClick={openNewGraph} />
+        </GridListTile>
+      </Zoom>
+    </GridListWrapper>
+  );
+}
 
+function Welcome({ openNewGraph, openGraph, graphNames, openImportGraph, isAuthInitialized, classes }) {
   return (
     <>
       <CookieDialog />
@@ -89,20 +131,14 @@ function Welcome({ openNewGraph, openGraph, graphNames, openImportGraph, readNam
               Import graph
             </Button>
           </div>
-          <GridList cellHeight={320} cols={bigScreen ? 3 : 2} className={classes.graphList}>
-            {graphNames.map(([graphId, graphName], index) => (
-              <Zoom key={graphId} in={true} style={{ transitionDelay: `${index * 250 + 250}ms` }}>
-                <GridListTile cols={1}>
-                  <GraphCard graphId={graphId} graphName={graphName} onOpen={() => openGraph(graphId)} />
-                </GridListTile>
-              </Zoom>
-            ))}
-            <Zoom in={true} style={{ transitionDelay: `${graphNames.length * 250 + 250}ms` }}>
-              <GridListTile key="new" cols={1}>
-                <NewGraphCard onClick={openNewGraph} />
-              </GridListTile>
-            </Zoom>
-          </GridList>
+          <SkeletonGraphs show={!isAuthInitialized} className={classes.graphList} />
+          <GraphCards
+            show={isAuthInitialized}
+            graphNames={graphNames}
+            openGraph={openGraph}
+            openNewGraph={openNewGraph}
+            className={classes.graphList}
+          />
         </main>
         <Box marginTop={4} paddingBottom={4} component="footer">
           <Divider />

src/scenes/welcome/welcome.container.js

@@ -2,12 +2,14 @@ import { connect } from 'react-redux';
 
 import Welcome from './welcome.component';
 import { openDialog, DIALOG_IDS } from '../../ducks/dialog.duck';
-import { getGraphNamesAsArray, readNames } from './welcome.duck';
+import { getGraphNamesAsArray } from './welcome.duck';
 import { openGraph } from '../../ducks/navigation.duck';
+import { isInitialized } from '../../ducks/auth.duck';
 
 function mapStateToProps(state) {
   return {
     graphNames: getGraphNamesAsArray(state),
+    isAuthInitialized: isInitialized(state),
   };
 }
 
@@ -16,7 +18,6 @@ function mapDispatchToProps(dispatch) {
     openNewGraph: () => dispatch(openDialog(DIALOG_IDS.NEW_GRAPH)),
     openGraph: (graphId) => dispatch(openGraph(graphId)),
     openImportGraph: () => dispatch(openDialog(DIALOG_IDS.IMPORT_GRAPH)),
-    readNames: () => dispatch(readNames()),
   };
 }
 

src/services/google-auth.js

@@ -14,14 +14,16 @@ function getUserData(user) {
   };
 }
 
-export function initializeAuthProvider(onUserLoggedIn, setAuthProvider) {
+export function initializeAuthProvider(onUserLoggedIn, onUserNotLoggedIn, setAuthProvider) {
   const authProvider = new firebase.auth.GoogleAuthProvider();
   authProvider.addScope('https://www.googleapis.com/auth/firebase.database');
   setAuthProvider(authProvider);
   // If the user is already logged in, wait for auth to tell us. Unsubscribe from this if the user triggers the login manually so it does not get executed.
   onAuthStateChangedUnsubscribe = firebase.auth().onAuthStateChanged((currentUser) => {
     if (!!currentUser) {
       onUserLoggedIn(getUserData(currentUser));
+    } else {
+      onUserNotLoggedIn();
     }
   });
 }