Koala73/worldmonitor New commit #26
Description
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
- New feature
- Bug fix
- Refactor / code cleanup
- Other
Affected areas
- Other: Loading UX / Initial page render
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
#appdiv 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
- No API keys or secrets committed
- Tested theme switching (dark/light mode skeleton variants)
- Skeleton is properly hidden from screen readers