diff --git a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts index f287091..07a4edb 100644 --- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts +++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.spec.ts @@ -84,9 +84,10 @@ describe('FontCatalogStore', () => { store.destroy(); }); - it('starts with isEmpty false — initial fetch is in progress', () => { - // The observer starts fetching immediately on construction. - // isEmpty must be false so the UI shows a loader, not "no results". + it('starts with isEmpty false — observer is gated until setParams enables it', () => { + // The observer is disabled on construction (no auto-fetch) — see + // `#enabled` in the store. isEmpty must still be false so the UI + // doesn't flash "no results" before bindings configures the query. const store = makeStore(); expect(store.isEmpty).toBe(false); store.destroy(); diff --git a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts index c8eae85..c6d7510 100644 --- a/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts +++ b/src/entities/Font/model/store/fontCatalogStore/fontCatalogStore.svelte.ts @@ -31,6 +31,13 @@ type FontStoreResult = InfiniteQueryObserverResult({ limit: 50 }); + /** + * Gates the initial fetch. The observer starts disabled so the constructor + * cannot race ahead of the bindings module — which is the single source of + * truth for query params. The first setParams flips this on, producing a + * single fetch with the correctly merged queryKey. + */ + #enabled = $state(false); #result = $state({} as FontStoreResult); #observer: InfiniteQueryObserver< ProxyFontsResponse, @@ -45,6 +52,8 @@ export class FontCatalogStore { constructor(params: FontStoreParams = {}) { this.#params = { limit: 50, ...params }; this.#observer = new InfiniteQueryObserver(this.#qc, this.buildOptions()); + // Seed result synchronously; subscribe may not fire on disabled observers. + this.#result = this.#observer.getCurrentResult(); this.#unsubscribe = this.#observer.subscribe(r => { this.#result = r; }); @@ -88,10 +97,13 @@ export class FontCatalogStore { return this.#result.error ?? null; } /** - * True if no fonts were found for the current filter criteria + * True if no fonts were found for the current filter criteria. + * Always false until the observer has been enabled (via setParams) — otherwise + * the UI would briefly render "no results" on mount before bindings configures + * the query. */ get isEmpty(): boolean { - return !this.isLoading && !this.isFetching && this.fonts.length === 0; + return this.#enabled && !this.isLoading && !this.isFetching && this.fonts.length === 0; } /** @@ -129,10 +141,12 @@ export class FontCatalogStore { } /** - * Merge new parameters into existing state and trigger a refetch + * Merge new parameters into existing state and trigger a refetch. + * The first call also enables the observer (see `#enabled`). */ setParams(updates: Partial) { this.#params = { ...this.#params, ...updates }; + this.#enabled = true; this.#observer.setOptions(this.buildOptions()); } /** @@ -431,6 +445,7 @@ export class FontCatalogStore { const next = lastPage.offset + lastPage.limit; return next < lastPage.total ? { offset: next } : undefined; }, + enabled: this.#enabled, staleTime: hasFilters ? 0 : DEFAULT_QUERY_STALE_TIME_MS, gcTime: DEFAULT_QUERY_GC_TIME_MS, }; diff --git a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts index ed955fa..417fc3e 100644 --- a/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts +++ b/src/features/FilterAndSortFonts/model/store/bindings.svelte.ts @@ -42,20 +42,19 @@ $effect.root(() => { }); /** - * Mirror filter selections + debounced search query into fontCatalogStore params. + * Mirror filter selections + debounced search query + sort into fontCatalogStore params. + * + * Filters and sort are merged into one setParams call to avoid a startup race: + * two separate effects each issued setOptions with a different queryKey on the + * first flush, producing an orphaned `?limit=50&offset=0` fetch immediately + * followed by the real `?limit=50&sort=popularity&offset=0` fetch. + * * untrack the write so fontCatalogStore's internal $state reads don't feed back * into this effect's dependency graph. */ $effect(() => { const params = mapAppliedFiltersToParams(appliedFilterStore); - untrack(() => fontCatalogStore.setParams(params)); - }); - - /** - * Mirror sort selection into fontCatalogStore. - */ - $effect(() => { - const apiSort = sortStore.apiValue; - untrack(() => fontCatalogStore.setSort(apiSort)); + const sort = sortStore.apiValue; + untrack(() => fontCatalogStore.setParams({ ...params, sort })); }); });