add snackbar component and wiring for model loading

bldrs-ai · Oct 28, 2021 · 0ddbaf2 · 0ddbaf2
1 parent 05e51ac
commit 0ddbaf2
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 22 deletions.
diff --git a/public/index.html b/public/index.html
@@ -52,7 +52,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Buildrs</title>
+    <title>BLDRS</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/Components/Snackbar.js b/src/Components/Snackbar.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import Snackbar from '@mui/material/Snackbar';
+import { makeStyles } from '@material-ui/core/styles';
+import MuiAlert from '@mui/material/Alert';
+
+const Alert = React.forwardRef(function Alert(props, ref) {
+  return <MuiAlert elevation={1} ref={ref} variant='filled' {...props} />;
+});
+
+const useStyles = makeStyles((theme) => ({
+  alert: {
+    backgroundColor: '#787878',
+    width: 'auto',
+    paddingRight: 20,
+  },
+}));
+
+const SnackBarMessage = ({ message, type, open }) => {
+  const classes = useStyles();
+  return (
+    <Snackbar
+      open={open}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      autoHideDuration={6000}
+    >
+      <Alert
+        style={{
+          backgroundColor: '#787878',
+          width: 'auto',
+          paddingRight: 20,
+        }}
+        severity={type}
+      >
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default SnackBarMessage;
diff --git a/src/Components/ToolBar.js b/src/Components/ToolBar.js
@@ -44,7 +44,7 @@ const ToolBar = ({ fileOpen, onClickShare }) => {
           }}
         >
           <Typography variant='h6' className={classes.title}>
-            BUILDRS
+            BLDRS
           </Typography>
 
           <IconButton

diff --git a/src/Containers/CadView.js b/src/Containers/CadView.js
@@ -8,8 +8,8 @@ import NavPanel from '../Components/NavPanel';
 import SearchBar from '../Components/SearchBar';
 import ToolBar from '../Components/ToolBar';
 import gtag from '../utils/gtag.js';
-import CircularProgress from '@mui/material/CircularProgress';
 
+import SnackBarMessage from '../Components/Snackbar';
 import '../App.css';
 
 const debug = 0;
@@ -97,14 +97,6 @@ const useStyles = makeStyles((theme) => ({
     right: '50px',
     width: '400px',
   },
-  loader: {
-    color: 'lightgrey',
-    position: 'absolute',
-    top: '1%',
-    left: '49%',
-    width: 200,
-    height: 200,
-  },
 }));
 
 const CadView = () => {
@@ -250,10 +242,12 @@ const CadView = () => {
   }, []);
 
   const loadIfc = async (file) => {
+    setIsLoading(true);
     if (debug) {
       console.log(viewer);
     }
     await viewer.loadIfc(file, true);
+
     const rootElt = await viewer.IFC.getSpatialStructure(0, true);
     if (debug) {
       console.log('rootElt: ', rootElt);
@@ -276,9 +270,9 @@ const CadView = () => {
       (event) => loadIfc(event.target.files[0]),
       false
     );
+
     viewerContainer.appendChild(fileInput);
     fileInput.click();
-    setIsLoading(true);
   };
 
   let isLoaded = Object.keys(rootElement).length === 0;
@@ -295,15 +289,11 @@ const CadView = () => {
       ></div>
       <div index={{ zIndex: 100 }}>
         <ToolBar fileOpen={fileOpen} onClickShare={onClickShare} />
-        {isLoading ? (
-          <CircularProgress
-            thickness={8}
-            color='inherit'
-            className={classes.loader}
-            value={100}
-          />
-        ) : null}
-
+        <SnackBarMessage
+          message={'MODEL IS LOADING'}
+          open={isLoading}
+          type={'info'}
+        />
         {showSearchBar && (
           <div className={classes.searchContainer}>
             <SearchBar
@@ -323,7 +313,6 @@ const CadView = () => {
           />
         </div>
 
-        {/* </div> */}
         <div className={classes.menuToolbarContainer}>
           <div>
             {showNavPanel ? (