1
0
forked from wrenn/wrenn

Fix team name blink on navigation by lifting teams into a singleton store

Teams list was fetched on every Sidebar mount (each page navigation),
causing a flash from '…' to the real name on every tab switch. Move teams
into a module-level reactive store (teams.svelte.ts) that fetches once per
session and is shared between Sidebar and the team page.
This commit is contained in:
2026-03-24 14:44:09 +06:00
parent 71a7fdb76f
commit bf494f73fc
3 changed files with 40 additions and 17 deletions

View File

@ -3,7 +3,8 @@
import { onMount } from 'svelte';
import { Popover } from 'bits-ui';
import { auth } from '$lib/auth.svelte';
import { listTeams, createTeam, switchTeam, type TeamWithRole } from '$lib/api/team';
import { teams as teamsStore } from '$lib/teams.svelte';
import { createTeam, switchTeam } from '$lib/api/team';
import {
IconMonitor,
IconBox,
@ -25,9 +26,7 @@
let teamPopoverOpen = $state(false);
// Real teams from API
let teams = $state<TeamWithRole[]>([]);
let currentTeamName = $derived(teams.find((t) => t.id === auth.teamId)?.name ?? '');
let currentTeamName = $derived(teamsStore.list.find((t) => t.id === auth.teamId)?.name ?? '');
let userName = $derived(auth.email ?? '');
// Create team dialog
@ -69,10 +68,7 @@
}
async function fetchTeams() {
const result = await listTeams();
if (result.ok) {
teams = result.data;
}
await teamsStore.fetch();
}
async function handleSwitchTeam(teamId: string) {
@ -180,7 +176,7 @@
>
Teams
</div>
{#each teams as team (team.id)}
{#each teamsStore.list as team (team.id)}
<button
class="flex w-full items-center gap-2.5 rounded-[var(--radius-input)] px-2.5 py-2 text-ui transition-colors duration-150 hover:bg-[var(--color-bg-3)] {team.id ===
auth.teamId