From 723987b1968e6583e826894914c5205bb474b801 Mon Sep 17 00:00:00 2001 From: Chris Griffing Date: Thu, 1 Feb 2024 15:01:29 -0800 Subject: [PATCH] feat: add error page for users that could not load the database due to OPFS restrictions --- index.html | 5 +++ src/App.tsx | 10 +++--- src/components/LoadingErrorPage.tsx | 49 +++++++++++++++++++++++++++++ src/index.css | 2 +- src/router.tsx | 2 ++ 5 files changed, 62 insertions(+), 6 deletions(-) create mode 100644 src/components/LoadingErrorPage.tsx diff --git a/index.html b/index.html index 9864654..7317533 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,11 @@ Orderly: Dictation-based book writing +
diff --git a/src/App.tsx b/src/App.tsx index 935dab1..3b91039 100644 --- 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 new file mode 100644 index 0000000..afb05b2 --- /dev/null +++ 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 ( + + + Error loading libraries and database + + + The root of the issue is in how the browser gives permission for{" "} + + OPFS + {" "} + access. The following things have been known to cause this problem: + +
    +
  • Private and Incognito windows
    • +
  • Ublock Origin and other ad-blockers
    • +
  • + Firefox "Never Remember History". The setting can be found here{" "} + + about:preferences#privacy + +
    • +
+ + 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. + + + + ); +} diff --git a/src/index.css b/src/index.css index 2829b9d..99202ee 100644 --- 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 index e89ee5b..44c057f 100644 --- 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: , + errorElement: , children: [ { path: "",