chore: loading screen

.idea/workspace.xml

@@ -4,8 +4,11 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: make tool responsive">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: make tool examples responsive">
-      <change beforePath="$PROJECT_DIR$/src/components/examples/Examples.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/examples/Examples.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/Loading.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Loading.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Loading.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/config/routesConfig.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/config/routesConfig.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -193,14 +196,6 @@
       <workItem from="1719339559458" duration="303000" />
       <workItem from="1719340295244" duration="772000" />
     </task>
-    <task id="LOCAL-00014" summary="fix: readme">
-      <option name="closed" value="true" />
-      <created>1719006274218</created>
-      <option name="number" value="00014" />
-      <option name="presentableId" value="LOCAL-00014" />
-      <option name="project" value="LOCAL" />
-      <updated>1719006274218</updated>
-    </task>
     <task id="LOCAL-00015" summary="ubf">
       <option name="closed" value="true" />
       <created>1719006515710</created>
@@ -585,7 +580,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719359243294</updated>
     </task>
-    <option name="localTasksCounter" value="63" />
+    <task id="LOCAL-00063" summary="chore: make tool examples responsive">
+      <option name="closed" value="true" />
+      <created>1719359368236</created>
+      <option name="number" value="00063" />
+      <option name="presentableId" value="LOCAL-00063" />
+      <option name="project" value="LOCAL" />
+      <updated>1719359368236</updated>
+    </task>
+    <option name="localTasksCounter" value="64" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -606,7 +609,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: contributors graph" />
     <MESSAGE value="feat: create tool script" />
     <MESSAGE value="fix: missing files" />
     <MESSAGE value="fix: create tool" />
@@ -631,7 +633,8 @@
     <MESSAGE value="fix: merging branches" />
     <MESSAGE value="feat: make responsive" />
     <MESSAGE value="feat: make tool responsive" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: make tool responsive" />
+    <MESSAGE value="chore: make tool examples responsive" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: make tool examples responsive" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/components/Loading.css

@@ -0,0 +1,51 @@
+#spinner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 40px;
+  width: 56px;
+}
+
+#spinner > div {
+  width: 12px;
+  height: 12px;
+  background-color: #1e96f7;
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
+  animation: fuse-bouncedelay 1s infinite ease-in-out both;
+}
+
+#spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+#spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes fuse-bouncedelay {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes fuse-bouncedelay {
+  0%,
+  80%,
+  100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  40% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}

src/components/Loading.tsx

@@ -1,32 +1,20 @@
 import Typography from '@mui/material/Typography';
-import { useState } from 'react';
 import Box from '@mui/material/Box';
-import { useTimeout } from '../hooks';
+import './Loading.css';
-
-export type FuseLoadingProps = {
-  delay?: number;
-  className?: string;
-};
-
-/**
- * FuseLoading displays a loading state with an optional delay
- */
-function FuseLoading(props: FuseLoadingProps) {
-  const { delay = 0, className } = props;
-  const [showLoading, setShowLoading] = useState(!delay);
-
-  useTimeout(() => {
-    setShowLoading(true);
-  }, delay);
 
+function Loading() {
   return (
-    <div>
+    <Box
-      <Typography
+      sx={{
-        className="text-13 sm:text-20 -mb-16 font-medium"
+        width: '100%',
-        color="text.secondary"
+        height: 0.8 * window.innerHeight,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center'
+      }}
     >
-        Loading
+      <Typography color="primary">Loading</Typography>
-      </Typography>
       <Box
         id="spinner"
         sx={{
@@ -39,8 +27,8 @@ function FuseLoading(props: FuseLoadingProps) {
         <div className="bounce2" />
         <div className="bounce3" />
       </Box>
-    </div>
+    </Box>
   );
 }
 
-export default FuseLoading;
+export default Loading;