feat: loading-page for suspense

frontend/src/components/Loading/Loading.styles.jsx

@@ -0,0 +1,32 @@
+// Loading.styles.jsx
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+  },
+  loadingText: {
+    marginTop: "16px",
+    position: "relative",
+    "& .loadingDots::after": {
+      content: '"."',
+      position: "absolute",
+      left: "100%",
+      marginLeft: "4px",
+      animation: "$loadingDots 1s infinite",
+    },
+  },
+  "@keyframes loadingDots": {
+    "0%": { content: '"."' },
+    "25%": { content: '".."' },
+    "50%": { content: '"..."' },
+    "75%": { content: '"...."' },
+    "100%": { content: '"."' },
+  },
+});
+
+export default useStyles;