load page before db load

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: Lint code
+name: Lint
 
 on:
   # Runs on pushes targeting the default branch

src/components/App.jsx

@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { createBrowserRouter, Navigate, RouterProvider,  } from "react-router-dom";
 import Sidebar from "./sidebar";
 import Chat from "./chat";
 import Settings from "./Settings";
+import useIDB from "../utils/idb";
 
 export default function App() {
     const router = useState(createBrowserRouter([
@@ -26,5 +27,16 @@ export default function App() {
         },
     ]))[0];
 
-    return <RouterProvider router={router} />
+    const idb = useIDB();
+    const [warmup, setWarmUp] = useState(false);
+
+    useEffect(()=>{
+        (async function() {
+            await idb.initDB();
+            setWarmUp(true);
+        })()
+    // eslint-disable-next-line
+    }, [])
+
+    return warmup ? <RouterProvider router={router} /> : <></>
 }

src/utils/idb/index.js

@@ -10,9 +10,9 @@ const defaultOptions = {
 }
 
 class IDB {
-    constructor() {
-        this.initDB();
-    }
+    // constructor() {
+    //     this.initDB();
+    // }
 
     /**
      * Init database so that we can interact with it