PDFs in Projekt in public Verzeichnis

app/wait/page.jsx

@@ -3,16 +3,35 @@ import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { ClipLoader } from "react-spinners";
 
+// IndexedDB functions only in the browser
+let storePage, getPage;
+if (typeof window !== "undefined") {
+  const indexedDBModule = require("../../utils/indexedDB");
+  storePage = indexedDBModule.storePage;
+  getPage = indexedDBModule.getPage;
+}
+
 export default function WaitPage() {
   const router = useRouter();
 
   useEffect(() => {
-    // Starte den Timer, um nach 20 Sekunden weiterzuleiten
+    // Store the page as a Blob in IndexedDB in the background
+    if (typeof window !== "undefined" && storePage) {
+      const pageContent = `
+        <div style="text-align: center; margin-top: 100px;">
+          <h1>Bitte warten...</h1>
+          <div class="spinner"></div>
+          <p>Die Seite wird automatisch neu geladen.</p>
+        </div>`;
+      storePage("waitPage", new Blob([pageContent], { type: "text/html" }));
+    }
+
+    // Timer to redirect after 20 seconds
     const timer = setTimeout(() => {
       router.push("/");
-    }, 20000); // 20 Sekunden warten
+    }, 20000);
 
-    // Timer aufräumen, wenn die Komponente entladen wird
+    // Cleanup timer when component is unmounted
     return () => clearTimeout(timer);
   }, [router]);
 

components/modales/SettingsModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react"; // omponents/modales/settingsModal.jsx
 import ReactModal from "react-modal";
 import { ClipLoader } from "react-spinners";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons

utils/indexedDB.js

@@ -1,13 +1,17 @@
-import { openDB } from "idb";
+import { openDB } from "idb"; // utils/indexedDB.js
 
 const dbPromise = openDB("my-pdf-store", 1, {
   upgrade(db) {
     if (!db.objectStoreNames.contains("pdfs")) {
       db.createObjectStore("pdfs");
     }
+    if (!db.objectStoreNames.contains("pages")) {
+      db.createObjectStore("pages");
+    }
   },
 });
 
+// Store PDF
 export async function storePDF(name, file) {
   const db = await dbPromise;
   await db.put("pdfs", file, name);
@@ -17,3 +21,14 @@ export async function getPDF(name) {
   const db = await dbPromise;
   return await db.get("pdfs", name);
 }
+
+// Store page
+export async function storePage(name, file) {
+  const db = await dbPromise;
+  await db.put("pages", file, name);
+}
+
+export async function getPage(name) {
+  const db = await dbPromise;
+  return await db.get("pages", name);
+}