feat: add error page for users that could not load the database due t…

…o OPFS restrictions
cmgriffing · Feb 1, 2024 · 723987b · 723987b
1 parent ee7ac9e
commit 723987b
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/orderly.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Orderly: Dictation-based book writing</title>
+    <script
+      defer
+      data-domain="orderly.cmgriffing.com"
+      src="https://plausible.io/js/script.js"
+    ></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.tsx b/src/App.tsx
@@ -83,14 +83,14 @@ export function App() {
     async function initialize() {
       await DBUtils.seed();
       startTransition(() => {
-        setTimeout(() => {
-          setAppReady(true);
-          setFetchTimestamp(Date.now());
-        }, 10000);
+        setAppReady(true);
+        setFetchTimestamp(Date.now());
       });
     }
 
-    initialize();
+    if (!!setAppReady && !!setFetchTimestamp) {
+      initialize();
+    }
   }, [setAppReady, setFetchTimestamp]);
 
   useEffect(() => {

diff --git a/src/components/LoadingErrorPage.tsx b/src/components/LoadingErrorPage.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { Flex, Title, Text } from "@mantine/core";
+import { IconMoodPuzzled } from "@tabler/icons-react";
+
+export function LoadingErrorPage() {
+  return (
+    <Flex
+      align="center"
+      justify={"center"}
+      direction="column"
+      miw={"100vw"}
+      mih={"100vh"}
+      pos={"absolute"}
+      top={"0"}
+      p="2rem"
+    >
+      <IconMoodPuzzled size={200} />
+      <Title>Error loading libraries and database</Title>
+      <Flex direction="column" maw="600px">
+        <Text>
+          The root of the issue is in how the browser gives permission for{" "}
+          <a
+            target="_blank"
+            href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system"
+          >
+            OPFS
+          </a>{" "}
+          access. The following things have been known to cause this problem:
+        </Text>
+        <ul>
+          <li>Private and Incognito windows</li>
+          <li>Ublock Origin and other ad-blockers</li>
+          <li>
+            Firefox "Never Remember History". The setting can be found here{" "}
+            <a target="_blank" href="about:preferences#privacy">
+              about:preferences#privacy
+            </a>
+          </li>
+        </ul>
+        <Text>
+          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.
+        </Text>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/src/index.css b/src/index.css
@@ -14,7 +14,7 @@
 }
 
 body {
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 a {

diff --git a/src/router.tsx b/src/router.tsx
@@ -4,11 +4,13 @@ import { Demo } from "./Demo";
 import { Home } from "./routes/Home";
 import { Chapter } from "./routes/Chapter";
 import { Snippet } from "./routes/Snippet";
+import { LoadingErrorPage } from "./components/LoadingErrorPage";
 
 export const router = createBrowserRouter([
   {
     path: "",
     element: <App />,
+    errorElement: <LoadingErrorPage />,
     children: [
       {
         path: "",
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ @@
     }
     body {
-      overflow: hidden;
+      /* overflow: hidden; */
     }
     a {
@@ Expand Down @@