Merge pull request #1095 from hackforla/dev

Dev

products/statement-generator/src/components-layout/Loading.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { CircularProgress } from '@material-ui/core';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    wrapper: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      gap: '1.5em',
+    },
+    circularProgress: {
+      color: '#9903FF',
+    },
+  })
+);
+
+interface LoadingProps {}
+
+const Loading: React.FC<LoadingProps> = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.wrapper}>
+      <CircularProgress className={classes.circularProgress} size="2rem" />
+      <h1>Loading</h1>
+    </div>
+  );
+};
+
+export default Loading;

products/statement-generator/src/index.tsx

@@ -4,14 +4,15 @@ import ReactDOM from 'react-dom';
 import 'styles/cssreset.css';
 
 import App from './App';
+import Loading from './components-layout/Loading';
 import reportWebVitals from './reportWebVitals';
 
 import './moduleAugmentation';
 import './i18n';
 
 ReactDOM.render(
   <React.StrictMode>
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<Loading />}>
       <App />
     </Suspense>
   </React.StrictMode>,