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.
49 lines
1.4 KiB
TypeScript
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>
|
|
);
|
|
}
|