Spinner (#12)

* added spinner to prevent UI snapping on ipfs load

* change where ipfsLoaded is set

Author: dholms

src/components/Loader.js

@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { withStyles, createStyles } from "@material-ui/core/styles";
+import CircularProgress from "@material-ui/core/CircularProgress";
+
+const Loader = props => {
+  const { loaded, classes } = props;
+  if (loaded) {
+    return props.children;
+  }
+  return (
+    <div className={classes.root}>
+      <CircularProgress size={100} />
+    </div>
+  );
+};
+
+Loader.propTypes = {
+  loaded: PropTypes.bool,
+  children: PropTypes.element,
+  classes: PropTypes.objectOf(PropTypes.string)
+};
+
+const styles = theme =>
+  createStyles({
+    root: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      paddingTop: theme.spacing(8)
+    }
+  });
+
+export default withStyles(styles)(Loader);

src/components/Main.js

@@ -7,11 +7,13 @@ import Typography from "@material-ui/core/Typography";
 import PreferenceForm from "./PreferenceForm";
 import Preview from "./Preview";
 import ErrorSnackbar from "./ErrorSnackbar";
+import Loader from "./Loader";
 import { loadPreferences, savePreferences } from "../ipfs/preferences";
 
 const DEFAULT_CID = "QmYiGo3KpK5Ca928ujpH2MKJgVEkLE981gj1QERYC5h8e8";
 class Main extends React.Component {
   state = {
+    ipfsLoaded: false,
     cid: "",
     preferences: {
       username: "",
@@ -61,7 +63,8 @@ class Main extends React.Component {
     this.setState({
       cid,
       preferences,
-      justLoaded: true
+      justLoaded: true,
+      ipfsLoaded: true
     });
   };
 
@@ -104,7 +107,6 @@ class Main extends React.Component {
         <Typography variant="h4" gutterBottom>
           IPFS Portable User Settings
         </Typography>
-        {/* <div className={classes.main}> */}
         <Grid container spacing={3}>
           <Grid item sm={12} md={6}>
             <PreferenceForm
@@ -119,13 +121,14 @@ class Main extends React.Component {
             />
           </Grid>
           <Grid item sm={12} md={6}>
-            <Preview
-              cid={this.state.cid}
-              preferences={this.state.preferences}
-            />
+            <Loader loaded={this.state.ipfsLoaded}>
+              <Preview
+                cid={this.state.cid}
+                preferences={this.state.preferences}
+              />
+            </Loader>
           </Grid>
         </Grid>
-        {/* </div> */}
         <ErrorSnackbar
           error={this.state.error}
           onClose={this.handleErrorClose}

src/components/SubmitButton.js

@@ -27,7 +27,8 @@ SubmitButton.propTypes = {
   textNormal: PropTypes.string.isRequired,
   textSubmitted: PropTypes.string.isRequired,
   icon: PropTypes.element,
-  submitted: PropTypes.bool
+  submitted: PropTypes.bool,
+  classes: PropTypes.objectOf(PropTypes.string)
 };
 
 const styles = theme =>