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>
This commit is contained in:
parent
bad2b107ba
commit
e0fa300213
2 changed files with 35 additions and 0 deletions
19
src/app/[locale]/loading.tsx
Normal file
19
src/app/[locale]/loading.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
16
src/app/[locale]/qa/slow/page.tsx
Normal file
16
src/app/[locale]/qa/slow/page.tsx
Normal file
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue