Promt

 SYSTEM / TASK You are a senior frontend engineer experienced in production-grade Next.js, animation-heavy websites, and asset preloading pipelines.

PROBLEM STATEMENT I already implemented a loading screen, but:

The loading progress is NOT real-time (it finishes before image sequence assets are fully loaded).

The website enters the main page while many image sequence assets are still not fetched or decoded.

The "Skip Loading" button has a logic flaw: skipping hides the loader but stops or breaks the preload process.

STRICT REQUIREMENTS

The loading progress MUST be based on real asset loading status, not timers or fake intervals.

Loading should only complete after all image sequence assets are fully fetched AND decoded (await image.decode()).

The "Skip Loading" button MUST:

Instantly hide the loader UI

BUT allow asset preloading to continue in the background

MUST NOT cancel, abort, or interrupt the preload process

Do NOT modify existing UI design unless required for logic clarity.

Do NOT use emojis as visual elements.

Use image placeholders only.

DELIVERABLES

Identify why the current loading system is non-real-time (common architectural mistakes).

Propose a production-ready loading architecture for image sequence websites.

Provide clear pseudocode or code examples (React / Next.js) showing:

Real-time progress calculation

Proper image preloading + decoding

Correct Skip Loading behavior without breaking preload

Explain how professional developers debug this issue (tools & techniques).

IMPORTANT This is a real-world production website, not a demo. Prioritize correctness, performance, and professional best practices.