studio-variable/world-game
4
1
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

perf : replace loading flash with background preloader, parallel sub-page fetch
All checks were successful
Deploy Production / Deploy to Production (push) Successful in 25s
Details

Browse source 
- Add #preloader div with scrollable-page-background.png as CSS background,
  matching the Svelte bg-fixed image so the transition is imperceptible
  (image is cached by the time Svelte requests it)
- Revert #ssr-content to visually-hidden (clip) for Google Wave 1 crawl
- Prevent scrollbar flash by adding overflow:hidden to html,body inline
  before main.css loads
- Parallel-fetch sub-page data (/blog/slug.json) alongside parent in initRouter
  so Blog/WhitePapers components receive prefetched data on mount — eliminates
  the list→article flash on direct navigation

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-05-25 18:05:06 +02:00
parent 56e4e55791
commit 7ba18dcd9d
6 changed files with 101 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
site/snippets/header.php
View file

@ -7,7 +7,10 @@
<?php snippet('seo/head') ?>
<style>
html, body { overflow: hidden; }
#app { min-height: 100vh; }
/* Hidden SSR content — in DOM for Google Wave 1 crawl, invisible to users */
#ssr-content {
position: absolute;
width: 1px; height: 1px;
@ -17,6 +20,21 @@
white-space: nowrap;
border: 0;
}
/* Preloader — covers the blank #app while JS loads.
Uses the same background image as the Svelte app so the transition
is seamless (image is already cached when Svelte requests it). */
#preloader {
position: fixed;
inset: 0;
z-index: 9999;
background: #000 url('/assets/img/scrollable-page-background.png') center / cover no-repeat;
transition: opacity 0.4s ease;
pointer-events: none;
}
#preloader.preloader-hiding {
opacity: 0;
}
</style>
<!-- Favicon -->
@ -46,3 +64,4 @@
</head>
<body data-template="<?= $page->intendedTemplate() ?>">
<div id="app"></div>
<div id="preloader" aria-hidden="true"></div>

9
site/templates/article.php
View file

@ -12,6 +12,15 @@
<?php foreach ($page->body()->toBlocks() as $block): ?>
<?php if ($block->type() === 'text'): ?>
<?= $block->content()->text()->value() ?>
<?php elseif ($block->type() === 'heading'): ?>
<<?= $block->content()->level() ?>><?= $block->content()->text() ?></<?= $block->content()->level() ?>>
<?php elseif ($block->type() === 'quote'): ?>
<blockquote><p><?= $block->content()->text() ?></p></blockquote>
<?php elseif ($block->type() === 'image'): ?>
<?php $imgFile = $block->content()->image()->toFile() ?>
<?php if ($imgFile): ?>
<figure><img src="<?= $imgFile->url() ?>" alt="<?= $block->content()->alt() ?>" /></figure>
<?php endif ?>
<?php endif ?>
<?php endforeach ?>
<?php