Add BBC News RSS feed (source bbc, BBC red accent)

Stream the page shell first so a loader shows while feeds fetch
Opening the page used to block on refreshStale() before a single byte went out, so the browser sat on a blank tab for the whole fetch. index.php now renders templates/shell.php (head, header, filters, skeleton loader) and flushes it, then refreshes and appends templates/content.php, which removes the loader as the feed HTML arrives. - templates/layout.php is split into shell.php + content.php - refresh chip moved to a right-aligned row above the feed: the toolbar paints before the refresh report exists - header story count shows the cached total, then corrects to the real one - skeleton styles match the card grid and keep the sources' chroma; a noscript style hides the loader for clients without JS - README: file map and page-load lifecycle updated
2026-10-16 15:57:43 -04:00 · 2026-10-08 15:28:51 -04:00
7 changed files with 226 additions and 74 deletions
@@ -19,6 +19,9 @@ No framework, no build step. PHP + SQLite for caching, Bootstrap 5 for the UI.
  selection** from the browser (`manage.php`, password protected): add
  channels by `@handle`, disable or remove feeds — no config editing needed.
 - Paginates with a **"Load more stories"** button (AJAX, 20 per page).
+- Streams the page shell (header, filters and a skeleton loader) to the browser
+  **before** the feeds are fetched, so something paints within milliseconds on
+  every open.
 - Caches everything in **SQLite** so page loads never wait on the network; feeds
  are refreshed on demand when stale (default TTL 30 min).

@@ -217,13 +220,16 @@ index.php                                            api/items.php
   FeedService::page(source, page, pageSize, since)   ← read path
          └─ FeedRepository::getItems()/countItems()  SQL over the SQLite cache
                 │
-                 └─ View::render('layout' | 'cards')  server-rendered HTML
+                 └─ View::render('cards')  server-rendered HTML
                    (api/items.php returns that HTML inside a JSON envelope)
 ```

-**Request lifecycle (page load):** bootstrap → refresh stale feeds → validate
-`source`/`range` → query one page → render `templates/layout.php` which includes
-`templates/cards.php`.
+**Request lifecycle (page load):** bootstrap → sync configured feeds → render
+`templates/shell.php` (head, header, filters, skeleton loader) and **flush it**
+→ refresh stale feeds → query one page → append the rendered
+`templates/content.php` (which includes `templates/cards.php`) and drop the
+loader. The shell paints while the refresh is still running; the loader never
+outlives the fetch — the content chunk removes it as soon as it arrives.

 **Request lifecycle (load more):** `assets/app.js` calls `api/items.php` with the
 next `page` (plus current `source` and `range`), receives
@@ -283,7 +289,8 @@ button when `has_more` is false.
 │   ├── ManageAuth.php        manage.php gate: password, CSRF, flash messages
 │   └── View.php              Escaping + render() + labels/colors/time formatting
 ├── templates/
-│   ├── layout.php            Full page shell, filters, grid, empty state, Load more
+│   ├── shell.php             Streamed first: head, header, filters, feed loader
+│   ├── content.php           Streamed after the refresh: grid, empty state, Load more
 │   ├── manage.php            Feed management page (login, add forms, feed list)
 │   └── cards.php             One feed card partial (used by page + API)
 ├── assets/
@@ -399,6 +399,65 @@ main {
    font-family: var(--mono);
 }

+/* ---------- Feed loader ---------- */
+
+/* Skeleton cards hold the feed's place while the first page is fetched. The
+   spine stays neutral: no source colour is known yet, so the sources keep
+   their chroma to themselves. */
+.skeleton-card {
+    --src: var(--line-2);
+    pointer-events: none;
+}
+
+.skeleton-thumb,
+.skeleton-chip,
+.skeleton-line {
+    display: block;
+    background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-2) 37%, var(--surface-2) 63%);
+    background-size: 400% 100%;
+    border-radius: 6px;
+    animation: skeleton-sweep 1.5s ease-in-out infinite;
+}
+
+.skeleton-thumb {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: 0;
+}
+
+.skeleton-chip {
+    width: 46px;
+    height: 18px;
+    border-radius: 999px;
+    flex-shrink: 0;
+}
+
+.skeleton-line {
+    height: 0.62rem;
+    margin-bottom: 0.5rem;
+}
+
+.skeleton-title {
+    height: 1.02rem;
+    margin-bottom: 0.75rem;
+}
+
+.skeleton-timestamp {
+    width: 3.25rem;
+    height: 0.72rem;
+    margin-bottom: 0;
+}
+
+@keyframes skeleton-sweep {
+    from {
+        background-position: 100% 50%;
+    }
+
+    to {
+        background-position: 0 50%;
+    }
+}
+
 /* ---------- Empty state ---------- */

 .empty-state {
@@ -61,4 +61,11 @@ return [
        'label'  => 'RT News',
        'url'    => 'https://www.rt.com/rss/',
    ],
+
+    // BBC News (top stories).
+    [
+        'source' => 'bbc',
+        'label'  => 'BBC News',
+        'url'    => 'https://feeds.bbci.co.uk/news/rss.xml',
+    ],
 ];
@@ -6,13 +6,11 @@ declare(strict_types=1);
 $app = require __DIR__ . '/src/bootstrap.php';

 $config = $app['config'];
+$repository = $app['repository'];
 $service = $app['service'];

-$refresh = $service->refreshStale();
-
-$sources = $service->sources();
 $activeSource = $_GET['source'] ?? null;
-if (!is_string($activeSource) || !in_array($activeSource, $sources, true)) {
+if (!is_string($activeSource) || $activeSource === '') {
    $activeSource = null;
 }

@@ -21,13 +19,41 @@ $activeRange = $_GET['range'] ?? '';
 if (!is_string($activeRange) || !array_key_exists($activeRange, $ranges)) {
    $activeRange = '';
 }
+
 $since = $activeRange !== '' ? gmdate('c', time() - (int) $ranges[$activeRange]) : null;
+$pageSize = (int) $config['page_size'];

-$page = $service->page($activeSource, 1, (int) $config['page_size'], $since);
+// Register the configured feeds before anything renders so the filter tabs are
+// complete on a fresh database; refreshStale() repeats the same sync cheaply.
+$repository->syncFeeds($app['feeds']);

-echo App\View::render('layout', [
+$sources = $service->sources();
+if ($activeSource !== null && !in_array($activeSource, $sources, true)) {
+    $activeSource = null;
+}
+
+// Send the shell (header, filters and the feed loader) before refreshing, so
+// the loader is on screen while the feeds are being fetched. Nothing may hold
+// those bytes back.
+ini_set('zlib.output_compression', '0');
+while (ob_get_level() > 0 && ob_end_flush()) {
+    // Drop any active output buffers so the shell reaches the browser now.
+}
+
+echo App\View::render('shell', [
    'config' => $config,
    'sources' => $sources,
+    'activeSource' => $activeSource,
+    'activeRange' => $activeRange,
+    'cachedTotal' => $repository->countItems($activeSource, $since),
+]);
+
+flush();
+
+$refresh = $service->refreshStale();
+$page = $service->page($activeSource, 1, $pageSize, $since);
+
+echo App\View::render('content', [
    'activeSource' => $activeSource,
    'activeRange' => $activeRange,
    'page' => $page,
@@ -17,6 +17,7 @@ final class View
            'youtube' => 'YouTube',
            'reddit' => 'Reddit',
            'rt' => 'RT',
+            'bbc' => 'BBC',
            default => ucfirst($source),
        };
    }
@@ -27,6 +28,7 @@ final class View
            'youtube' => 'text-bg-danger',
            'reddit' => 'text-bg-warning',
            'rt' => 'text-bg-dark',
+            'bbc' => 'text-bg-danger',
            default => 'text-bg-secondary',
        };
    }
@@ -37,6 +39,7 @@ final class View
            'youtube' => '#ff3b5c',
            'reddit' => '#ff7a2f',
            'rt' => '#1fcb93',
+            'bbc' => '#bb1919',
            default => '#f1f3f7',
        };
    }
@@ -0,0 +1,88 @@
+<?php
+
+declare(strict_types=1);
+
+use App\View;
+
+/** @var string|null $activeSource */
+/** @var string|null $activeRange */
+/** @var array<string, mixed> $page */
+/** @var array<string, mixed> $refresh */
+
+$activeRange = $activeRange ?? '';
+$errors = $refresh['errors'] ?? [];
+$total = (int) $page['total'];
+?>
+<?php if (($refresh['attempted'] ?? 0) > 0): ?>
+    <div class="d-flex justify-content-end mb-3">
+        <span class="refresh-chip mono">
+            <span aria-hidden="true">↻</span>
+            <?= (int) $refresh['succeeded'] ?>/<?= (int) $refresh['attempted'] ?> feeds
+            · <?= (int) $refresh['new_items'] ?> new
+        </span>
+    </div>
+<?php endif; ?>
+
+<?php if ($errors !== []): ?>
+    <div class="alert alert-warning alert-dismissible fade show small alert-soft" role="alert">
+        <strong>Some feeds could not be refreshed:</strong>
+        <ul class="mb-0 ps-3">
+            <?php foreach ($errors as $error): ?>
+                <li><?= View::e((string) $error) ?></li>
+            <?php endforeach; ?>
+        </ul>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+<?php endif; ?>
+
+<div id="feed"
+     class="row g-4"
+     data-api="api/items.php"
+     data-source="<?= View::e((string) ($activeSource ?? '')) ?>"
+     data-range="<?= View::e($activeRange) ?>"
+     data-page="1"
+     data-page-size="<?= (int) $page['page_size'] ?>"
+     data-has-more="<?= $page['has_more'] ? '1' : '0' ?>"
+     data-total="<?= $total ?>">
+    <?= View::render('cards', ['items' => $page['items']]) ?>
+</div>
+
+<div id="feed-empty" class="empty-state text-center <?= $total > 0 ? 'd-none' : '' ?>">
+    <div class="empty-mark" aria-hidden="true"></div>
+    <?php if ($activeRange !== ''): ?>
+        <p class="empty-title mb-1">Nothing in the past <?= View::e(View::rangeLabel($activeRange)) ?></p>
+        <p class="small mb-0">Try a wider time range to see more.</p>
+    <?php else: ?>
+        <p class="empty-title mb-1">Nothing in the feed yet</p>
+        <p class="small mb-0">Feeds may be rate limited right now — reload in a moment.</p>
+    <?php endif; ?>
+</div>
+
+<div class="text-center mt-5">
+    <button id="load-more"
+            type="button"
+            class="btn btn-tally <?= $page['has_more'] ? '' : 'd-none' ?>">
+        <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
+        Load more stories
+    </button>
+</div>
+</main>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+<script src="assets/app.js" defer></script>
+<script>
+    (function () {
+        var loader = document.getElementById('feed-loader');
+        if (loader !== null) {
+            loader.remove();
+        }
+
+        var count = document.getElementById('story-count');
+        if (count !== null) {
+            count.textContent = '<?= $total ?> stories';
+        }
+    })();
+</script>
+</body>
+</html>
@@ -8,8 +8,7 @@ use App\View;
 /** @var array<int, string> $sources */
 /** @var string|null $activeSource */
 /** @var string|null $activeRange */
-/** @var array<string, mixed> $page */
-/** @var array<string, mixed> $refresh */
+/** @var int $cachedTotal */

 $tabs = ['' => 'All'];
 foreach ($sources as $source) {
@@ -34,9 +33,6 @@ $linkFor = static function (string $source, string $range): string {

    return $params === [] ? '?' : '?' . http_build_query($params);
 };
-
-$errors = $refresh['errors'] ?? [];
-$total = (int) $page['total'];
 ?>
 <!doctype html>
 <html lang="en" data-bs-theme="dark">
@@ -44,6 +40,7 @@ $total = (int) $page['total'];
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>RSS Feed Dashboard</title>
+    <noscript><style>#feed-loader{display:none}</style></noscript>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
@@ -62,7 +59,7 @@ $total = (int) $page['total'];
        <div class="d-flex align-items-center gap-3">
            <div class="header-meta d-none d-md-flex align-items-center">
                <span class="pulse" aria-hidden="true"></span>
-                <span class="mono"><?= $total ?> stories</span>
+                <span class="mono" id="story-count"><?= $cachedTotal ?> stories</span>
                <span class="sep">/</span>
                <span class="mono">YouTube · Reddit · RT</span>
            </div>
@@ -90,14 +87,6 @@ $total = (int) $page['total'];
                    </li>
                <?php endforeach; ?>
            </ul>
-
-            <?php if (($refresh['attempted'] ?? 0) > 0): ?>
-                <span class="refresh-chip mono">
-                    <span aria-hidden="true">↻</span>
-                    <?= (int) $refresh['succeeded'] ?>/<?= (int) $refresh['attempted'] ?> feeds
-                    · <?= (int) $refresh['new_items'] ?> new
-                </span>
-            <?php endif; ?>
        </div>

        <div class="d-flex flex-wrap align-items-center gap-2 mt-3">
@@ -113,53 +102,26 @@ $total = (int) $page['total'];
        </div>
    </div>

-    <?php if ($errors !== []): ?>
-        <div class="alert alert-warning alert-dismissible fade show small alert-soft" role="alert">
-            <strong>Some feeds could not be refreshed:</strong>
-            <ul class="mb-0 ps-3">
-                <?php foreach ($errors as $error): ?>
-                    <li><?= View::e((string) $error) ?></li>
-                <?php endforeach; ?>
-            </ul>
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-        </div>
-    <?php endif; ?>
-
-    <div id="feed"
-         class="row g-4"
-         data-api="api/items.php"
-         data-source="<?= View::e((string) ($activeSource ?? '')) ?>"
-         data-range="<?= View::e($activeRange) ?>"
-         data-page="1"
-         data-page-size="<?= (int) $page['page_size'] ?>"
-         data-has-more="<?= $page['has_more'] ? '1' : '0' ?>"
-         data-total="<?= $total ?>">
-        <?= View::render('cards', ['items' => $page['items']]) ?>
+    <div id="feed-loader" class="row g-4" role="status">
+        <span class="visually-hidden">Loading feeds…</span>
+        <?php for ($placeholder = 0; $placeholder < 3; $placeholder++): ?>
+            <div class="col-12 col-md-6 col-xl-4">
+                <div class="card h-100 feed-card skeleton-card" aria-hidden="true">
+                    <div class="skeleton-thumb"></div>
+                    <div class="card-body d-flex flex-column">
+                        <div class="d-flex align-items-center gap-2 mb-2">
+                            <span class="skeleton-chip"></span>
+                            <span class="skeleton-line w-50 mb-0"></span>
+                        </div>
+                        <span class="skeleton-line skeleton-title w-100"></span>
+                        <span class="skeleton-line w-100"></span>
+                        <span class="skeleton-line w-75"></span>
+                        <div class="card-footer-meta mt-auto d-flex justify-content-between align-items-center pt-3">
+                            <span class="skeleton-line w-25 mb-0"></span>
+                            <span class="skeleton-line skeleton-timestamp"></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <?php endfor; ?>
    </div>
-
-    <div id="feed-empty" class="empty-state text-center <?= $total > 0 ? 'd-none' : '' ?>">
-        <div class="empty-mark" aria-hidden="true"></div>
-        <?php if ($activeRange !== ''): ?>
-            <p class="empty-title mb-1">Nothing in the past <?= View::e(View::rangeLabel($activeRange)) ?></p>
-            <p class="small mb-0">Try a wider time range to see more.</p>
-        <?php else: ?>
-            <p class="empty-title mb-1">Nothing in the feed yet</p>
-            <p class="small mb-0">Feeds may be rate limited right now — reload in a moment.</p>
-        <?php endif; ?>
-    </div>
-
-    <div class="text-center mt-5">
-        <button id="load-more"
-                type="button"
-                class="btn btn-tally <?= $page['has_more'] ? '' : 'd-none' ?>">
-            <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
-            Load more stories
-        </button>
-    </div>
-</main>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
-<script src="assets/app.js" defer></script>
-</body>
-</html>