Heb er een PWA van gemaakt en layout gecorrigeerd

2026-08-19 16:46:29 +02:00
parent d3cab99d86
commit 686339325e
21 changed files with 1629 additions and 103 deletions
@@ -0,0 +1,47 @@
+import { cookies } from "next/headers";
+import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";
+
+export default async function Loading() {
+  const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);
+
+  return (
+    <main className="min-h-screen animate-pulse bg-slate-50" aria-busy="true">
+      <div className="bg-gradient-to-r from-sky-900 via-cyan-800 to-cyan-600 text-white shadow-lg">
+        <div className="mx-auto max-w-7xl px-6 py-12">
+          <div className="h-10 w-80 rounded-lg bg-white/20" />
+          <div className="mt-4 h-5 max-w-2xl rounded bg-white/15" />
+          <div className="mt-6 h-10 w-24 rounded-lg bg-white/20" />
+        </div>
+      </div>
+
+      <div className="mx-auto max-w-7xl px-6 py-10">
+        <div className="mb-6 inline-flex rounded-2xl bg-white p-6 shadow-md ring-1 ring-slate-200">
+          <div>
+            <div className="h-4 w-32 rounded bg-slate-200" />
+            <div className="mt-2 h-9 w-12 rounded bg-cyan-100" />
+          </div>
+        </div>
+
+        <div className="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
+          <div className="border-b border-slate-200 px-6 py-4">
+            <div className="h-6 w-28 rounded bg-slate-200" />
+          </div>
+
+          <div className="flex items-center justify-center gap-3 px-6 py-8 text-sm text-slate-500">
+            <span className="h-5 w-5 rounded-full border-2 border-cyan-200 border-t-cyan-600 motion-safe:animate-spin" />
+            {t(locale, "articles.loading")}
+          </div>
+
+          <div className="space-y-5 px-6 pb-8">
+            {[...Array(7)].map((_, index) => (
+              <div key={index} className="flex gap-6">
+                <div className="h-5 w-32 rounded bg-slate-200" />
+                <div className="h-5 flex-1 rounded bg-slate-200" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}