Use a simpler app level loading animation

src/components/Loading.module.css

@@ -6,23 +6,23 @@
   align-items: center;
 }
 
-.pulse {
-  --color1: #dddddd;
-  --size: 40px;
-  width: var(--size);
-  height: var(--size);
-  margin: 10px;
-  background-color: var(--color1);
-  border-radius: 100%;
-  animation: pulseScaleOut 1s infinite ease-in-out;
+.spinner {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+  animation: rotate 1s steps(12, end) infinite;
+  background: transparent
+    url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")
+    no-repeat;
+  background-size: 100%;
 }
 
-@keyframes pulseScaleOut {
+@keyframes rotate {
   0% {
-    transform: scale(0);
+    transform: rotate3d(0, 0, 1, 0deg);
   }
   100% {
-    transform: scale(1);
-    opacity: 0;
+    transform: rotate3d(0, 0, 1, 360deg);
   }
 }

src/components/Loading.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import s0 from './Loading.module.css';
+import s from './Loading.module.css';
 
 type Props = {
   height?: string;
@@ -9,8 +9,8 @@ type Props = {
 const Loading = ({ height }: Props) => {
   const style = height ? { height } : {};
   return (
-    <div className={s0.loading} style={style}>
-      <div className={s0.pulse} />
+    <div className={s.loading} style={style}>
+      <div className={s.spinner} />
     </div>
   );
 };

src/components/Root.tsx

@@ -6,6 +6,7 @@ import { PartialRouteObject } from 'react-router';
 import { HashRouter as Router, useRoutes } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import { About } from 'src/components/about/About';
+import Loading from 'src/components/Loading';
 import { Head } from 'src/components/shared/Head';
 import { queryClient } from 'src/misc/query';
 
@@ -20,46 +21,11 @@ import SideBar from './SideBar';
 import StateProvider from './StateProvider';
 import StyleGuide from './StyleGuide';
 
-const Connections = lazy(
-  () =>
-    import(
-      /* webpackChunkName: "conns" */
-      /* webpackPrefetch: true */
-      './Connections'
-    )
-);
-const Config = lazy(
-  () =>
-    import(
-      /* webpackChunkName: "config" */
-      /* webpackPrefetch: true */
-      './Config'
-    )
-);
-const Logs = lazy(
-  () =>
-    import(
-      /* webpackChunkName: "logs" */
-      /* webpackPrefetch: true */
-      './Logs'
-    )
-);
-const Proxies = lazy(
-  () =>
-    import(
-      /* webpackChunkName: "proxies" */
-      /* webpackPrefetch: true */
-      './proxies/Proxies'
-    )
-);
-const Rules = lazy(
-  () =>
-    import(
-      /* webpackChunkName: "rules" */
-      /* webpackPrefetch: true */
-      './Rules'
-    )
-);
+const Connections = lazy(() => import('./Connections'));
+const Config = lazy(() => import('./Config'));
+const Logs = lazy(() => import('./Logs'));
+const Proxies = lazy(() => import('./proxies/Proxies'));
+const Rules = lazy(() => import('./Rules'));
 
 const routes = [
   { path: '/', element: <Home /> },
@@ -107,7 +73,7 @@ const Root = () => (
           <Router>
             <div className={s0.app}>
               <Head />
-              <Suspense fallback={<Loading2 />}>
+              <Suspense fallback={<Loading />}>
                 <App />
               </Suspense>
             </div>

src/components/StyleGuide.tsx

@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { Zap } from 'react-feather';
+import Loading from 'src/components/Loading';
 
 import Button from './Button';
 import Input from './Input';
@@ -76,7 +77,7 @@ class StyleGuide extends PureComponent {
           <Button label="Button Plain" kind="minimal" />
         </Pane>
         <Pane style={{ paddingLeft: 20 }}>
-          <LoadingDot />
+          <Loading />
         </Pane>
       </div>
     );