fix: keep font settings visible during repo navigation

- resetFiles() no longer clears userSettings so FontChange stays visible
  while navigating between repos (old fonts show until new ones load)
- Add _requestId counter to setUserRepo() to discard stale async callbacks
  from previous navigations, preventing state corruption on quick nav
- Load savedRepo and userSettings caches in parallel with Promise.all,
  reducing yield points so cache hits apply before first render

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Calixte
2026-04-04 11:21:56 +02:00
parent 52d7c84bd0
commit 1b5e23e3d4

View File

@@ -20,6 +20,7 @@ interface State {
readme?: string | null readme?: string | null
userSettings?: UserSettings | null userSettings?: UserSettings | null
needToLogin: boolean needToLogin: boolean
_requestId: number
} }
export const useUserRepoStore = defineStore("USER_REPO_STATE", { export const useUserRepoStore = defineStore("USER_REPO_STATE", {
@@ -29,40 +30,44 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
files: [], files: [],
readme: undefined, readme: undefined,
userSettings: undefined, userSettings: undefined,
needToLogin: false needToLogin: false,
_requestId: 0
}), }),
actions: { actions: {
async setUserRepo(user: string, repo: string) { async setUserRepo(user: string, repo: string) {
const requestId = ++this._requestId
this.user = user this.user = user
this.repo = repo this.repo = repo
const savedRepoId = data.generateId(DataType.SavedRepo, `${user}-${repo}`) const savedRepoId = data.generateId(DataType.SavedRepo, `${user}-${repo}`)
const cachedSavedRepo = await data.get<DataType.SavedRepo, SavedRepo>( const userSettingsId = `UserSetting-${user}-${repo}`
savedRepoId
) const [cachedSavedRepo, cachedUserSettings] = await Promise.all([
data.get<DataType.SavedRepo, SavedRepo>(savedRepoId),
data.get<DataType.UserSettings, UserSettings>(userSettingsId)
])
if (requestId !== this._requestId) return
if (cachedSavedRepo) { if (cachedSavedRepo) {
this.files = cachedSavedRepo.files this.files = cachedSavedRepo.files
} }
if (cachedUserSettings) {
this.userSettings = cachedUserSettings
}
try { try {
await refreshToken() await refreshToken()
} catch (error) { } catch (error) {
console.warn("impossible to refresh token", error) console.warn("impossible to refresh token", error)
} }
const userSettingsId = `UserSetting-${user}-${repo}` if (requestId !== this._requestId) return
const cachedUserSettings = await data.get<
DataType.UserSettings,
UserSettings
>(userSettingsId)
if (cachedUserSettings) {
this.userSettings = cachedUserSettings
}
getFiles(user, repo) getFiles(user, repo)
.then(async (files) => { .then(async (files) => {
if (requestId !== this._requestId) return
data.update<DataType.SavedRepo, SavedRepo>({ data.update<DataType.SavedRepo, SavedRepo>({
_id: savedRepoId, _id: savedRepoId,
$type: DataType.SavedRepo, $type: DataType.SavedRepo,
@@ -74,6 +79,7 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
return getUserSettingsContent(user, repo, files) return getUserSettingsContent(user, repo, files)
}) })
.then((userSettings) => { .then((userSettings) => {
if (requestId !== this._requestId) return
const chosenFontFamily = userSettings?.fontFamilies?.find( const chosenFontFamily = userSettings?.fontFamilies?.find(
(font) => font === this.userSettings?.chosenFontFamily (font) => font === this.userSettings?.chosenFontFamily
) )
@@ -109,6 +115,7 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
}) })
getCachedMainReadme(user, repo).then(async (cachedReadme) => { getCachedMainReadme(user, repo).then(async (cachedReadme) => {
if (requestId !== this._requestId) return
this.readme = cachedReadme this.readme = cachedReadme
this.readme = await getMainReadme(user, repo) this.readme = await getMainReadme(user, repo)
}) })
@@ -142,11 +149,11 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
this.user = "" this.user = ""
this.repo = "" this.repo = ""
this.resetFiles() this.resetFiles()
this.userSettings = undefined
}, },
resetFiles() { resetFiles() {
this.files = [] this.files = []
this.readme = null this.readme = null
this.userSettings = undefined
}, },
setFontFamily(fontFamily: string) { setFontFamily(fontFamily: string) {
if (!this.userSettings) { if (!this.userSettings) {