From 070dd5e64a55f4d9bd0364169d4b306fa5950b90 Mon Sep 17 00:00:00 2001
From: Chris Griffing <cmgriffing@gmail.com>
Date: Thu, 1 Feb 2024 15:24:19 -0800
Subject: [PATCH] fix: add loading screen while app initializes

---
 src/App.tsx                         |   5 +
 src/components/AppLoader.tsx        | 151 ++++++++++++++++++++++++++++
 src/components/LoadingErrorPage.tsx |  10 +-
 src/main.tsx                        |   9 +-
 4 files changed, 167 insertions(+), 8 deletions(-)
 create mode 100644 src/components/AppLoader.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 3b91039..3c7daee 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -35,6 +35,7 @@ import { NodeApi, Tree } from "react-arborist";
 import { BookWithChapters, BooksCRUD } from "./data/repositories/books";
 import { ChapterModel, ChaptersCRUD } from "./data/repositories/chapters";
 
+import { AppLoader } from "./components/AppLoader";
 import { CreateOrUpdateModal } from "./components/CreateOrUpdateModal";
 import { SettingsModal } from "./components/SettingsModal";
 
@@ -99,6 +100,10 @@ export function App() {
     }
   }, [whisperModel, openSettingsModal, ready]);
 
+  if (!ready) {
+    return <AppLoader />;
+  }
+
   return (
     <>
       <AppShell
diff --git a/src/components/AppLoader.tsx b/src/components/AppLoader.tsx
new file mode 100644
index 0000000..8951f72
--- /dev/null
+++ b/src/components/AppLoader.tsx
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from "react";
+import { Flex, Title, Text, Loader } from "@mantine/core";
+
+const loadingTextOptions = [
+  "Adding Hidden Agendas",
+  "Adjusting Bell Curves",
+  "Aesthesizing Industrial Areas",
+  "Aligning Covariance Matrices",
+  "Applying Feng Shui Shaders",
+  "Applying Theatre Soda Layer",
+  "Asserting Packed Exemplars",
+  "Attempting to Lock Back-Buffer",
+  "Binding Sapling Root System",
+  "Breeding Fauna",
+  "Building Data Trees",
+  "Bureacritizing Bureaucracies",
+  "Calculating Inverse Probability Matrices",
+  "Calculating Llama Expectoration Trajectory",
+  "Calibrating Blue Skies",
+  "Charging Ozone Layer",
+  "Coalescing Cloud Formations",
+  "Cohorting Exemplars",
+  "Collecting Meteor Particles",
+  "Compounding Inert Tessellations",
+  "Compressing Fish Files",
+  "Computing Optimal Bin Packing",
+  "Concatenating Sub-Contractors",
+  "Containing Existential Buffer",
+  "Debarking Ark Ramp",
+  "Debunching Unionized Commercial Services",
+  "Deciding What Message to Display Next",
+  "Decomposing Singular Values",
+  "Decrementing Tectonic Plates",
+  "Deleting Ferry Routes",
+  "Depixelating Inner Mountain Surface Back Faces",
+  "Depositing Slush Funds",
+  "Destabilizing Economic Indicators",
+  "Determining Width of Blast Fronts",
+  "Deunionizing Bulldozers",
+  "Dicing Models",
+  "Diluting Livestock Nutrition Variables",
+  "Downloading Satellite Terrain Data",
+  "Exposing Flash Variables to Streak System",
+  "Extracting Resources",
+  "Factoring Pay Scale",
+  "Fixing Election Outcome Matrix",
+  "Flood-Filling Ground Water",
+  "Flushing Pipe Network",
+  "Gathering Particle Sources",
+  "Generating Jobs",
+  "Gesticulating Mimes",
+  "Graphing Whale Migration",
+  "Hiding Willio Webnet Mask",
+  "Implementing Impeachment Routine",
+  "Increasing Accuracy of RCI Simulators",
+  "Increasing Magmafacation",
+  "Initializing My Sim Tracking Mechanism",
+  "Initializing Rhinoceros Breeding Timetable",
+  "Initializing Robotic Click-Path AI",
+  "Inserting Sublimated Messages",
+  "Integrating Curves",
+  "Integrating Illumination Form Factors",
+  "Integrating Population Graphs",
+  "Iterating Cellular Automata",
+  "Lecturing Errant Subsystems",
+  "Mixing Genetic Pool",
+  "Modeling Object Components",
+  "Mopping Occupant Leaks",
+  "Normalizing Power",
+  "Obfuscating Quigley Matrix",
+  "Overconstraining Dirty Industry Calculations",
+  "Partitioning City Grid Singularities",
+  "Perturbing Matrices",
+  "Pixalating Nude Patch",
+  "Polishing Water Highlights",
+  "Populating Lot Templates",
+  "Preparing Sprites for Random Walks",
+  "Prioritizing Landmarks",
+  "Projecting Law Enforcement Pastry Intake",
+  "Realigning Alternate Time Frames",
+  "Reconfiguring User Mental Processes",
+  "Relaxing Splines",
+  "Removing Road Network Speed Bumps",
+  "Removing Texture Gradients",
+  "Removing Vehicle Avoidance Behavior",
+  "Resolving GUID Conflict",
+  "Reticulating Splines",
+  "Retracting Phong Shader",
+  "Retrieving from Back Store",
+  "Reverse Engineering Image Consultant",
+  "Routing Neural Network Infanstructure",
+  "Scattering Rhino Food Sources",
+  "Scrubbing Terrain",
+  "Searching for Llamas",
+  "Seeding Architecture Simulation Parameters",
+  "Sequencing Particles",
+  "Setting Advisor Moods",
+  "Setting Inner Deity Indicators",
+  "Setting Universal Physical Constants",
+  "Sonically Enhancing Occupant-Free Timber",
+  "Speculating Stock Market Indices",
+  "Splatting Transforms",
+  "Stratifying Ground Layers",
+  "Sub-Sampling Water Data",
+  "Synthesizing Gravity",
+  "Synthesizing Wavelets",
+  "Time-Compressing Simulator Clock",
+  "Unable to Reveal Current Activity",
+  "Weathering Buildings",
+  "Zeroing Crime Network",
+];
+
+export function AppLoader() {
+  const [loadingText, setLoadingText] = useState(
+    loadingTextOptions[Math.floor(Math.random() * loadingTextOptions.length)]
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setLoadingText(
+        loadingTextOptions[
+          Math.floor(Math.random() * loadingTextOptions.length)
+        ]
+      );
+    }, 3000);
+
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  return (
+    <Flex
+      align="center"
+      justify={"center"}
+      direction="column"
+      miw={"100vw"}
+      mih={"100vh"}
+      pos={"absolute"}
+      top={"0"}
+      p="2rem"
+      gap="1rem"
+    >
+      <Loader size={"100px"} color="blue" />
+      <Title>Loading</Title>
+      <Flex direction="column" maw="300px">
+        <Text>{loadingText}</Text>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/components/LoadingErrorPage.tsx b/src/components/LoadingErrorPage.tsx
index afb05b2..eff3d8f 100644
--- a/src/components/LoadingErrorPage.tsx
+++ b/src/components/LoadingErrorPage.tsx
@@ -41,7 +41,15 @@ export function LoadingErrorPage() {
           To use this app, you will need to disable any and all of those
           features. This app uses minimal GDPR-compliant analytics via Plausible
           to measure usage. No other data is sent out of your browser to a
-          server.
+          server. If you think you are getting this error through some other
+          cause besides those listed above, please feel free to add to this{" "}
+          <a
+            target="_blank"
+            href="https://github.com/cmgriffing/orderly/issues/33"
+          >
+            Issue on GitHub
+          </a>
+          .
         </Text>
       </Flex>
     </Flex>
diff --git a/src/main.tsx b/src/main.tsx
index 68393d9..bce0004 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,17 +6,12 @@ import { MantineProvider, Loader, Flex } from "@mantine/core";
 
 import "@mantine/core/styles.css";
 import "./index.css";
+import { AppLoader } from "./components/AppLoader";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <MantineProvider>
-      <Suspense
-        fallback={
-          <Flex h="100vh" w="100vw" align={"center"} justify={"center"}>
-            <Loader />
-          </Flex>
-        }
-      >
+      <Suspense fallback={<AppLoader />}>
         <RouterProvider router={router} />
       </Suspense>
     </MantineProvider>