Suspense-Style Fallback Card — Vanilla JS Loading Boundary Pattern

React's <Suspense fallback={<Skeleton />}> pattern shows a fallback UI while a component's data is unresolved, then swaps to the real component the instant it resolves — no manual loading-state plumbing inside the component itself. This snippet demonstrates that exact visual pattern without React: a fallback skeleton and the real content both exist in the DOM from the start, and a single fetchProfile() function toggles which one is visible based on whether the simulated "resource" has resolved — the same boundary-and-swap mechanic, written by hand.

Two pre-built states, one visibility toggle

Both the .sf-fallback skeleton and the .sf-content real markup exist in the HTML from page load; only their hidden attribute changes. fetchProfile() shows the fallback and hides the content, waits on a promise standing in for a real request, and on resolve flips hidden the other way. This mirrors what Suspense does structurally — the fallback and the resolved tree are two things React can swap between, not a single element mutating its own inner state — which is why this pattern generalizes so cleanly to any framework or no framework at all.

Why this is useful without React

If you like the Suspense mental model — declare a fallback, declare the real content, let a resolve event handle the swap — but you're not using React (or you're building a plain HTML component), this is the same idea implemented directly: a promise-returning function that owns exactly one job, showing the right state at the right time. It reads as a clean vanilla-JS pattern for "loading boundary" logic that a framework component or hook could wrap later.

A real promise, not a fake delay

fetchProfile returns an actual Promise, resolved here by a setTimeout standing in for fetch(). Because it's a real promise, callers can await it, chain .then(), or race it against a timeout — the same ergonomics as the data-fetching function a Suspense-compatible resource would wrap, just without the resource-cache machinery React needs internally.

Retry included

A "Refetch" button re-invokes fetchProfile(), re-showing the fallback and disabling itself until the new promise resolves — demonstrating that the boundary isn't a one-shot animation, it's a reusable toggle driven by any promise you hand it. Pair the fallback shape with a skeleton loader for other layouts, or an ai thinking loader for a chat-specific fallback.