2.5.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zipline-next",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "private": true,
   "dependencies": {
     "@dicedtomato/colors": "^1.0.3",

src/components/UIPlaceholder.tsx

@@ -1,175 +1,21 @@
 import React from 'react';
-import AppBar from '@material-ui/core/AppBar';
-import Drawer from '@material-ui/core/Drawer';
-import Hidden from '@material-ui/core/Hidden';
-import IconButton from '@material-ui/core/IconButton';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
+import Backdrop from '@material-ui/core/Backdrop';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import Grid from '@material-ui/core/Grid';
-import MenuIcon from '@material-ui/icons/Menu';
-import Skeleton from '@material-ui/lab/Skeleton';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex'
-  },
-  drawer: {
-    [theme.breakpoints.up('sm')]: {
-      width: 240,
-      flexShrink: 0
-    }
-  },
-  appBar: {
-    [theme.breakpoints.up('sm')]: {
-      width: 'calc(100%)',
-      marginLeft: 240
-    }
-  },
-  menuButton: {
-    marginRight: theme.spacing(2),
-    [theme.breakpoints.up('sm')]: {
-      display: 'none'
-    }
-  },
-  rightButton: {
-    marginLeft: 'auto'
-  },
-  // necessary for content to be below app bar
-  toolbar: theme.mixins.toolbar,
-  drawerPaper: {
-    width: 240
-  },
-  content: {
-    flexGrow: 1,
-    padding: theme.spacing(3)
-  },
-  fullWidth: {
-    width: '100%'
+  backdrop: {
+    zIndex: theme.zIndex.drawer + 1,
+    color: '#000'
   }
 }));
 
 export default function UIPlaceholder() {
   const classes = useStyles();
-  const theme = useTheme();
-  const [mobileOpen, setMobileOpen] = React.useState(false);
-
-  const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
-  };
-
-  const drawer = (
-    <div>
-      <Toolbar>
-        <AppBar position='fixed' className={classes.appBar} elevation={0}>
-          <Toolbar>
-            <IconButton
-              color='inherit'
-              aria-label='open drawer'
-              edge='start'
-              onClick={handleDrawerToggle}
-              className={classes.menuButton}
-            >
-              <MenuIcon />
-            </IconButton>
-            <Typography variant='h6' noWrap>
-              Zipline
-            </Typography>
-            <div className={classes.rightButton}>
-              <Skeleton animation='wave' className={classes.fullWidth} />
-            </div>
-          </Toolbar>
-        </AppBar>
-      </Toolbar>
-
-      <List>
-        <ListItem button key='Home'>
-          <Skeleton animation='wave' className={classes.fullWidth} />
-        </ListItem>
-        <ListItem button key='Statistics'>
-          <Skeleton animation='wave' className={classes.fullWidth} />
-        </ListItem>
-        <ListItem button key='Images'>
-          <Skeleton animation='wave' className={classes.fullWidth} />
-        </ListItem>
-        <ListItem button key='URLs'>
-          <Skeleton animation='wave' className={classes.fullWidth} />
-        </ListItem>
-      </List>
-    </div>
-  );
-
-  const container =
-    typeof window !== 'undefined' ? () => window.document.body : undefined;
 
   return (
-    <div className={classes.root}>
-      <AppBar position='fixed' className={classes.appBar} elevation={0}>
-        <Toolbar>
-          <IconButton
-            color='inherit'
-            aria-label='open drawer'
-            edge='start'
-            onClick={handleDrawerToggle}
-            className={classes.menuButton}
-          >
-            <MenuIcon />
-          </IconButton>
-          <Typography variant='h6' noWrap>
-            Zipline
-          </Typography>
-        </Toolbar>
-      </AppBar>
-      <nav className={classes.drawer} aria-label='mailbox folders'>
-        <Hidden smUp implementation='css'>
-          <Drawer
-            container={container}
-            variant='temporary'
-            anchor={theme.direction === 'rtl' ? 'right' : 'left'}
-            open={mobileOpen}
-            onClose={handleDrawerToggle}
-            classes={{
-              paper: classes.drawerPaper
-            }}
-            ModalProps={{
-              keepMounted: true // Better open performance on mobile.
-            }}
-          >
-            {drawer}
-          </Drawer>
-        </Hidden>
-        <Hidden xsDown implementation='css'>
-          <Drawer
-            classes={{
-              paper: classes.drawerPaper
-            }}
-            variant='permanent'
-            open
-            PaperProps={{ style: { border: 'none' } }}
-          >
-            {drawer}
-          </Drawer>
-        </Hidden>
-      </nav>
-
-      <main className={classes.content}>
-        <div className={classes.toolbar} />
-        <Grid
-          container
-          spacing={0}
-          direction='column'
-          alignItems='center'
-          justify='center'
-          style={{ minHeight: '80vh' }}
-        >
-          <Grid item xs={3}>
-            <CircularProgress size={100} />
-          </Grid>
-        </Grid>
-      </main>
-    </div>
+    <Backdrop className={classes.backdrop} open={true}>
+      <CircularProgress color='inherit' />
+    </Backdrop>
   );
 }

src/pages/_app.tsx

@@ -5,7 +5,7 @@ import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { store, persistor } from '../store';
 import ZiplineTheming from '../components/ZiplineTheming';
-
+import UIPlaceholder from '../components/UIPlaceholder';
 
 function MyApp({ Component, pageProps }) {
   const [theme, setTheme] = useState<'dark' | 'light'>('dark');
@@ -19,7 +19,6 @@ function MyApp({ Component, pageProps }) {
     })();
   }, []);
   return (
-
     <React.Fragment>
       <Head>
         <title>Zipline</title>
@@ -30,8 +29,12 @@ function MyApp({ Component, pageProps }) {
       </Head>
 
       <Provider store={store}>
-        <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
-          <ZiplineTheming Component={Component} pageProps={pageProps} theme={theme} />
+        <PersistGate loading={<UIPlaceholder />} persistor={persistor}>
+          <ZiplineTheming
+            Component={Component}
+            pageProps={pageProps}
+            theme={theme}
+          />
         </PersistGate>
       </Provider>
     </React.Fragment>
@@ -43,4 +46,4 @@ MyApp.propTypes = {
   pageProps: PropTypes.object.isRequired
 };
 
-export default MyApp;
+export default MyApp;