Add skeleton loading screen to prevent FOUC (koala73/worldmonitor#146)
Summary
Adds a pre-rendered skeleton loading screen that displays instantly
before JavaScript boots, eliminating flash of unstyled content (FOUC).
The skeleton mimics the final layout with animated shimmer effects and
automatically replaces when the app initializes.
Type of change
Affected areas
Details
This change improves the perceived performance and user experience by:
- Inlining critical skeleton CSS in the
<head> to ensure it
renders before any external stylesheets load
- Pre-rendering skeleton HTML in the
#app div that displays
instantly on page load
- Supporting both themes with dark mode as default and light mode
variants via [data-theme="light"] selectors
- Adding shimmer animation to skeleton lines for visual feedback
that content is loading
- Marking skeleton as hidden from accessibility with
aria-hidden="true" so screen readers skip it
The skeleton layout includes:
- Header with logo, filters, and controls
- Map section with toolbar
- Grid of 6 data panels with headers and content lines
When the Vue app initializes and calls renderLayout(), the skeleton is
automatically replaced with the actual content.
Checklist
https://claude.ai/code/session_01Fxk8GMRn2cEUq3ThC2a8e5
Add skeleton loading screen to prevent FOUC (koala73/worldmonitor#146)
Summary
Adds a pre-rendered skeleton loading screen that displays instantly
before JavaScript boots, eliminating flash of unstyled content (FOUC).
The skeleton mimics the final layout with animated shimmer effects and
automatically replaces when the app initializes.
Type of change
Affected areas
Details
This change improves the perceived performance and user experience by:
<head>to ensure itrenders before any external stylesheets load
#appdiv that displaysinstantly on page load
variants via
[data-theme="light"]selectorsthat content is loading
aria-hidden="true"so screen readers skip itThe skeleton layout includes:
When the Vue app initializes and calls
renderLayout(), the skeleton isautomatically replaced with the actual content.
Checklist
https://claude.ai/code/session_01Fxk8GMRn2cEUq3ThC2a8e5