Pinning the next match to the top of a cached fixtures list

Hlulani Baloyi — Fri, 09 Oct 2026 15:21:19 +0000

A few weeks ago I wrote about keeping the league table readable when the signal at the ground disappears. The fixtures list had the same problem, plus one of its own: people only ever want the next game, and they want it before they scroll. The list I was copying the layout from is the one on https://baduzah-celtics.co.za/, where upcoming matches and finished ones sit in the same feed, so I had to split them myself.

The data is an array of matches with an ISO kick-off time, home and away names, and a score that is null until the game is played. Around thirty rows for a season. Small enough that I never bothered with IndexedDB.

Splitting past and upcoming

My first attempt compared kick-off strings to new Date().toISOString(). It mostly worked, which is the worst kind of working. A match that kicked off at 15:00 dropped into "played" at 15:00 exactly, while the score was still null for another two hours, and the top of the page showed nothing at all during the game.

Now a match counts as upcoming until it has a score or is more than three hours past kick-off:

const THREE_HOURS = 3 * 60 * 60 * 1000;

function isUpcoming(match, now = Date.now()) {
  if (match.score !== null) return false;
  return new Date(match.kickoff).getTime() + THREE_HOURS > now;
}

const upcoming = matches.filter(m => isUpcoming(m))
  .sort((a, b) => new Date(a.kickoff) - new Date(b.kickoff));
const next = upcoming[0];

next gets its own card above the list, with the date written out in words. Everything else renders below in the usual rows.

The cache bit

Same pattern as the table: fetch with a four second timeout, save the raw JSON to localStorage with a timestamp, fall back to the saved copy when the request fails. Two changes this time.

I save the fetch time and the server's own updated field separately. They differ more than you would think, because the feed itself is sometimes a day behind, and showing only my fetch time made stale data look fresh.

And I recompute isUpcoming on render, not on fetch. If the phone loaded the list at noon and you open it again at six, the noon copy still knows the afternoon game is finished, even without a connection. That one took me an embarrassingly long time to notice, because I was always testing at my desk with wifi.

Still not sure what to do about postponed games. The feed keeps the old date and adds nothing, so for now they just sit in "upcoming" with a date in the past until somebody fixes the data.

Showing a league table offline when the signal at the ground is bad

Hlulani Baloyi — Thu, 08 Oct 2026 19:38:07 +0000

Our club plays at a ground where the mobile signal drops to nothing about ten minutes before kick-off, which is exactly when people want to check the log and the next fixture. So the small page I keep for the club had to work without a connection, at least for the last thing it managed to load.

The table comes in as JSON: sixteen teams, eight numbers each. The first version fetched it on every page load and showed a spinner forever when the request failed. Not great on a match day.

What I ended up with is boring but it works:

Fetch the JSON with a short timeout (four seconds).
If it arrives, render it and save the raw string to localStorage together with the time it was fetched.
If the request fails or times out, read the saved copy, render it, and show a small line under the table: "Last updated 14:05, no connection".

The timestamp turned out to matter more than I expected. Without it people assumed the table was live and argued about points that were already out of date.

Two things I'd do differently from the start. First, store the parsed numbers, not the HTML, because I changed the table layout twice and old cached HTML looked broken. Second, keep the cache key versioned (table-v2), so a format change doesn't try to read the old shape.

Next I want the fixtures list to work the same way, with the next match pinned to the top. If you've done offline caching for something similar and found a cleaner pattern than localStorage plus a timestamp, I'd like to hear it.

DEV Community: Hlulani Baloyi

Pinning the next match to the top of a cached fixtures list

Splitting past and upcoming

The cache bit

Showing a league table offline when the signal at the ground is bad