April 23: Empty State During Loading

Single-PR day with a UX polish — the target detail page was flashing the "no recipes" empty state for a split second while recipes were still loading, which looked broken. Also spent time on UX docs for the app (unrelated to PRs, doc work only).

Developer Journal

Hide no-recipes empty state while loading (#1377)

On the target detail page, the recipe list had two states: "has recipes" (render the list) and "no recipes" (render the "create your first recipe" empty state). The loading state was implicitly the same as "no recipes" — no data yet, show empty.

The problem: for the first ~200ms after navigating to a target, the recipes query was in-flight, so the page rendered the empty state CTA. Once the recipes arrived, the page replaced it with the actual list. The user experience was a flash of "there are no recipes, make one!" followed by the real list appearing. Looked broken.

Fixed by tri-stating the render:

if (isLoading) return <RecipeListSkeleton />;
if (recipes.length === 0) return <NoRecipesEmptyState />;
return <RecipeList recipes={recipes} />;

isLoading is the query's initial-fetch flag, not the refetch flag — showing the skeleton for background refetches would also flash content. Tests updated to cover all three states.

Side context: UX docs work

Spent the afternoon on UX docs for the app — writing up the canonical user journeys and wiring them to the 4+1 scenarios view from March 31. Still in a local branch, not in a PR yet. Pairs well with starting to think about the v2 UX direction (interface design skill first, then anti-slop principles on top).

What shipped

PR	Title
#1377	fix(target-detail): hide no-recipes empty state while recipes are still loading