Add Circular Progress till the Firebase Data is fetched (#79)

* Add Circular Progress till the Firebase Data is fetched

* revision 1: Add Circular Progress till the Firebase Data is fetched

* renamed OpenSource to Account

Author: Abhishek-kumar09

src/layouts/MainLayout/TopBar/Account.js

@@ -12,17 +12,26 @@ import {
   Avatar,
   Menu,
   MenuItem,
-  Hidden
+  Hidden,
+  CircularProgress,
+  makeStyles
 } from '@material-ui/core';
 import authService from 'src/services/authService';
 import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 import { login, dismissLogin, logout } from 'src/actions/accountActions';
 
+const useStyles = makeStyles(theme => ({
+  button: {
+    minWidth: '120px'
+  }
+}));
+
 function Account() {
   const user = useSelector(state => state.account.user);
   const loginFlag = useSelector(state => state.account.login);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const dispatch = useDispatch();
+  const classes = useStyles();
 
   const handleLogout = () => {
     handleCloseMenu();
@@ -70,7 +79,7 @@ function Account() {
           color: '#000000'
         }}
       >
-        {!!user ? (
+        {user ? (
           <Box
             display="flex"
             flexDirection="row"
@@ -121,12 +130,17 @@ function Account() {
           <Button
             variant="contained"
             color="secondary"
+            className={classes.button}
             onClick={handleLoginOpen}
             style={{
               textTransform: 'capitalize'
             }}
           >
-            <Typography variant="h6">Login</Typography>
+            {user === undefined ? (
+              <CircularProgress size="24px" color="inherit" />
+            ) : (
+              <Typography variant="h6">Login</Typography>
+            )}
           </Button>
         )}
 

src/layouts/MainLayout/TopBar/index.js

@@ -12,7 +12,7 @@ import {
 } from '@material-ui/core';
 import Logo from 'src/components/Logo';
 import Item from './Item';
-import OpenSource from './Account';
+import Account from './Account';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import CloseIcon from '@material-ui/icons/Close';
@@ -143,10 +143,9 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
               link={item.link}
             />
           ))}
-          ;
           <Box ml={2} flexGrow={0.05} />
           <Box ml={2}>
-            <OpenSource />
+            <Account />
           </Box>
           <Box ml={2} flexGrow={0.05} />
         </Hidden>
@@ -157,7 +156,7 @@ function TopBar({ className, onMobileNavOpen, ...rest }) {
             alignItems="center"
             style={{ position: 'absolute', right: '0px'}}
           >
-            <OpenSource />
+            <Account />
 
             <IconButton
               edge="end"

src/reducers/accountReducer.js

@@ -11,8 +11,8 @@ import {
 } from 'src/actions/accountActions';
 
 const initialState = {
-  user: null,
-  login: null
+  user: undefined,
+  login: undefined
 };
 
 const accountReducer = (state = initialState, action) => {