chore: stubs out FullscreenLoader

src/admin/components/Routes.tsx

@@ -8,7 +8,7 @@ import { useConfig } from './utilities/Config';
 import List from './views/collections/List';
 import DefaultTemplate from './templates/Default';
 import { requests } from '../api';
-import Loading from './elements/Loading';
+import Loading, { FullscreenLoader } from './elements/Loading';
 import StayLoggedIn from './modals/StayLoggedIn';
 import Versions from './views/Versions';
 import Version from './views/Version';
@@ -73,7 +73,7 @@ const Routes = () => {
   }, [i18n.language, routes, userCollection]);
 
   return (
-    <Suspense fallback={<Loading />}>
+    <Suspense fallback={<FullscreenLoader />}>
       <Route
         path={routes.admin}
         render={({ match }) => {
@@ -92,7 +92,7 @@ const Routes = () => {
 
           if (initialized === true) {
             if (typeof user === 'undefined' || (user && typeof canAccessAdmin === 'undefined')) {
-              return <Loading />;
+              return <FullscreenLoader />;
             }
 
             return (

src/admin/components/elements/Loading/index.scss

@@ -0,0 +1,90 @@
+@import '../../../scss/styles';
+
+.fullscreen-loader {
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  &__bars {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    gap: 7px;
+    align-items: center;
+  }
+
+  &__bar {
+    width: 2px;
+    background-color: white;
+    height: 15px;
+
+    &:nth-child(1) {
+      transform: translateY(0);
+      animation: bar-odd 1s infinite;
+    }
+
+    &:nth-child(2) {
+      transform: translateY(-2px);
+      animation: bar-even 1s infinite;
+    }
+
+    &:nth-child(3) {
+      transform: translateY(0);
+      animation: bar-odd 1s infinite;
+    }
+
+    &:nth-child(4) {
+      transform: translateY(-2px);
+      animation: bar-even 1s infinite;
+    }
+
+    &:nth-child(5) {
+      transform: translateY(0);
+      animation: bar-odd 1s infinite;
+    }
+  }
+
+  // css animation to move lines up and down
+  @keyframes bar-even {
+    0% {
+      transform: translateY(2px);
+    }
+
+    50% {
+      transform: translateY(-2px);
+    }
+
+    100% {
+      transform: translateY(2px);
+    }
+  }
+
+  // css animation to move lines up and down
+  @keyframes bar-odd {
+    0% {
+      transform: translateY(-2px);
+    }
+
+    50% {
+      transform: translateY(2px);
+    }
+
+    100% {
+      transform: translateY(-2px);
+    }
+  }
+
+  &__text {
+    margin-top: base(.75);
+    text-transform: uppercase;
+    font-family: var(--font-body);
+    font-size: base(.75);
+    letter-spacing: 3px;
+  }
+}

src/admin/components/elements/Loading/index.tsx

@@ -1,5 +1,37 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
-const Loading: React.FC = () => <div />;
+import './index.scss';
+
+export const FullscreenLoader: React.FC = () => {
+  const baseClass = 'fullscreen-loader';
+  const { t } = useTranslation('general');
+
+  // TODO: only show after X time, possibly show for min time
+
+  return (
+    <div className={baseClass}>
+      <div className={`${baseClass}__bars`}>
+        <div className={`${baseClass}__bar`} />
+        <div className={`${baseClass}__bar`} />
+        <div className={`${baseClass}__bar`} />
+        <div className={`${baseClass}__bar`} />
+        <div className={`${baseClass}__bar`} />
+      </div>
+
+      <span className={`${baseClass}__text`}>{t('loading')}</span>
+    </div>
+  );
+};
+
+const Loading: React.FC = () => {
+  const baseClass = 'loading';
+
+  return (
+    <div className={baseClass}>
+      <span className={`${baseClass}__text`}>Loading...</span>
+    </div>
+  );
+};
 
 export default Loading;