Page fails to load due to blocking `Promise.all` on large taxonomy fetches

[swastikCommits]

What

The /products/[barcode]/edit route (and potentially /products/new) shows a blank page, then reloads, and finally displays an error message. The page never successfully renders.

The edit page's function in src/routes/products/[barcode]/edit/+page.ts]uses a single Promise.all() to simultaneously await the product API call and 6 large taxonomy JSON files:

const [productReq, categories, labels, brands, stores, origins, countries] = await Promise.all([
    off.getProductV3(params.barcode, { ... }),
    getTaxo<Category>('categories', fetch),   // ~10+ MB
    getTaxo<Label>('labels', fetch),
    getTaxo<Brand>('brands', fetch),
    getTaxo<Store>('stores', fetch),
    getTaxo<Origin>('origins', fetch),
    getTaxo<Country>('countries', fetch)
]);

Combined with export const ssr = false, this causes:
Blank page -> SSR is disabled, so the server sends an empty HTML shell; Long wait; Error page

Steps to reproduce the behavior:

1. Run the explorer locally (pnpm run dev)
2. Navigate to /products/8436006833168/edit (or any valid barcode)
3. Observe: blank page -> loading -> error

Expected behavior

The edit form should render immediately with product data

[VaiTon]

This is not an error per se. The problem is that the server is slow these days, so the fetch just throws after a timeout.

[swastikCommits]

Yup I have checked that the server is slow nowadays. But I came upon a workaround for that which will not throw a timeout when the server is slow.

• Only await the product API call. Start taxonomy fetches in parallel but nest them inside an object (e.g., taxo: { ... }) so SvelteKit doesn't block on them
• Use $state and $effect to resolve taxonomy promises asynchronously. Initialize taxonomy data as empty objects so the page renders immediately, autocomplete suggestions populate progressively as each taxonomy JSON finishes downloading.

[swastikCommits]

I came upon this from the parent page src/routes/products/[barcode]/+page.ts that handles this correctly by not awaiting taxonomy fetches.

// doesn't block on taxonomies
const categories = getTaxo<Category>('categories', fetch);  // just starts the fetch
return { state, taxo: { categories, labels, ... } };         // returns streaming promises

I tested it with the above approach, works fine. Shall I raise the PR for the same so maybe you can review it as well?
Wby @VaiTon ?

20260223-1844-27.3860449.mp4

[VaiTon]

I don't really know, because I'm not comfortable in assuming that, in edit mode, we should be completely upstream-independent. If we don't download taxonomies we can't show the localized names, and while this can be done in the product page while we show a loader, I don't know how we can handle this in edit mode.

[swastikCommits]

You're right too though but waiting so long is definitely a bad UX.
How about if we add some error fallbacks so individual taxonomy doesn't crash the whole page?
A failed taxonomy would return {} instead of crashing the entire page.

[VaiTon]

And then, how can we show localized names?