From e0fa300213e7cc1b1292842430a0f31bc2ccd6dc Mon Sep 17 00:00:00 2001
From: nxtkofi <psliwa.b@gmail.com>
Date: Tue, 21 Apr 2026 23:27:08 +0200
Subject: [PATCH] feat(ux): add locale route loading fallback

Add loading.tsx with spinner and QA slow route for testing

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/app/[locale]/loading.tsx      | 19 +++++++++++++++++++
 src/app/[locale]/qa/slow/page.tsx | 16 ++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/app/[locale]/loading.tsx
 create mode 100644 src/app/[locale]/qa/slow/page.tsx

diff --git a/src/app/[locale]/loading.tsx b/src/app/[locale]/loading.tsx
new file mode 100644
index 0000000..e4fa306
--- /dev/null
+++ b/src/app/[locale]/loading.tsx
@@ -0,0 +1,19 @@
+import { useTranslations } from "next-intl";
+import { Spinner } from "@/components/ui/spinner";
+
+export default function Loading() {
+  const t = useTranslations("Fallback.Loading");
+
+  return (
+    <div
+      data-testid="route-loading"
+      className="flex flex-col items-center justify-center min-h-[60vh] p-4"
+    >
+      <Spinner className="h-8 w-8 mb-4" />
+      <h2 className="text-lg font-semibold mb-2">{t("Title")}</h2>
+      <p className="text-muted-foreground text-center max-w-sm">
+        {t("Description")}
+      </p>
+    </div>
+  );
+}
diff --git a/src/app/[locale]/qa/slow/page.tsx b/src/app/[locale]/qa/slow/page.tsx
new file mode 100644
index 0000000..6d07a1b
--- /dev/null
+++ b/src/app/[locale]/qa/slow/page.tsx
@@ -0,0 +1,16 @@
+async function delay(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export default async function SlowPage() {
+  await delay(1500);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] p-4">
+      <h1 className="text-2xl font-bold mb-4">Slow Page Loaded</h1>
+      <p className="text-muted-foreground">
+        This page intentionally delayed rendering by 1.5 seconds for QA testing.
+      </p>
+    </div>
+  );
+}