Stage 17 (#4): in-memory lobby cache — render instantly on the back-slide, refresh in background

ui/src/screens/Lobby.svelte

@@ -8,6 +8,7 @@
   import { navigate } from '../lib/router.svelte';
   import { t, type MessageKey } from '../lib/i18n/index.svelte';
   import { resultBadge } from '../lib/result';
+  import { getLobby, setLobby } from '../lib/lobbycache';
   import type { AccountRef, GameView, Invitation } from '../lib/model';
 
   let games = $state<GameView[]>([]);
@@ -23,12 +24,23 @@
         [invitations, incoming] = await Promise.all([gateway.invitationsList(), gateway.friendsIncoming()]);
         app.notifications = invitations.length + incoming.length;
       }
+      setLobby({ games, invitations, incoming });
     } catch (e) {
       handleError(e);
     }
   }
 
-  onMount(load);
+  onMount(() => {
+    // Render instantly from the cached lists (so the screen does not "draw in" during
+    // the back-slide), then refresh in the background.
+    const cached = getLobby();
+    if (cached) {
+      games = cached.games;
+      invitations = cached.invitations;
+      incoming = cached.incoming;
+    }
+    void load();
+  });
   $effect(() => {
     if (app.lastEvent) void load();
   });