Files
Epicnabbo-Catalogus-Updated…/src/app/client/loading.tsx
T
openhands b59d6c21af feat: prioritize game iframe, gated register terms and polished register page
Fetch the Nitro client iframe with high priority so the browser starts the
game document before competing resources, and replace the bare /client
spinner with a branded boot screen. Preconnect and eager loading were already
in place; typing support for the iframe fetchPriority prop is added in a
React type augmentation.

Rework the register terms block into a single clickable accept control with
a custom check state, error shake and inline hint, and dim the submit button
until the terms are accepted. The register page gets labeled sections
(account details / credentials), a corrected banner overlay, translated
show/hide toggles and a captcha slot that reserves height to avoid layout
shifts. English is the source of truth; other locales fall back to it.
2026-08-29 21:14:02 +02:00

49 lines
1.4 KiB
TypeScript

import Image from "next/image";
export default function ClientLoading() {
return (
<div
className="relative flex items-center justify-center min-h-screen overflow-hidden"
style={{
background:
"radial-gradient(ellipse at center, color-mix(in srgb, var(--color-surface) 80%, transparent) 0%, var(--color-background) 75%)",
}}
>
<div
className="absolute inset-0 animate-pulse-glow"
style={{
background:
"radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 55%)",
}}
/>
<div className="relative flex flex-col items-center gap-6">
<div
className="w-20 h-20 rounded-2xl flex items-center justify-center shadow-2xl"
style={{
background:
"linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, black) 100%)",
boxShadow:
"0 12px 40px color-mix(in srgb, var(--color-primary) 35%, transparent)",
}}
>
<Image
src="/assets/images/icons/lighthouse.png"
alt=""
width={44}
height={44}
unoptimized
/>
</div>
<div
className="animate-spin w-9 h-9 border-[3px] rounded-full"
style={{
borderColor:
"color-mix(in srgb, var(--color-text-muted) 18%, transparent)",
borderTopColor: "var(--color-primary)",
}}
/>
</div>
</div>
);
}