skills.rest
lxsmnsyc
lxsmnsycCOMMUNITY
Explore all skills by this author →
Website𝕏@lxsmnsycGitHub

resource-suspense

Enforces correct createResource and Suspense boundary placement in SolidJS components.

2|1|Updated Jun 28, 2026
Search Tags:#code review#suspense#data fetching#reactivity#solidjs#solidstart#createresource
One-click install
npx skills add https://github.com/lxsmnsyc/overwander --skill resource-suspense-lxsmnsyc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: resource-suspense
Source: https://github.com/lxsmnsyc/overwander/tree/main/.agents/skills/resource-suspense
Command: npx skills add https://github.com/lxsmnsyc/overwander --skill resource-suspense-lxsmnsyc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? In SolidJS, reading a resource that is still loading throws, and the throw is caught by the nearest Suspense boundary above the reading body. A component that both declares a resource and reads it suspends the entire page instead of a local fallback, causing full-page loading flashes and lost UI state. ## Core Features & Use Cases - Component Splitting Rule: Declares resources in a parent body and moves every read into a child wrapped in Suspense, passing the accessor itself rather than the value. - Longhand Detection: Identifies createSignal plus createEffect pairs that reimplement createResource and converts them, including gating the source on a client signal for browser-only loads. - Read Helpers: Distinguishes settled (suspends once, holds through refetches, for children under a boundary) from answered (never suspends, for declaring bodies), and warns that resource.latest alone still suspends on first load. - Use Case: When adding a data fetch to a SolidStart page, apply this Skill to place the resource, boundary, derived memos, and effects on the correct sides so refetches never unmount the reading panel. ## Quick Start Review my SolidJS component that calls createResource and fix any reads happening in the declaring body by splitting it into a parent and a Suspense-wrapped child.

Frequently Asked Questions about resource-suspense

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use createResource with Suspense in SolidJS?▼

Declare the resource in a parent component and read it only in a child wrapped in Suspense, passing the accessor itself rather than the value. A read in the declaring body throws to the boundary above the whole component, suspending the page instead of the local panel.

Why does my SolidJS resource suspend the whole page?▼

The component both declares and reads the resource, so the throw is caught by the nearest Suspense above the component, often the page-level boundary. Split the read into a child component with its own Suspense wrapper so only that subtree shows the fallback.

Should I use createSignal with createEffect or createResource for fetching?▼

Use createResource when the effect only loads data into the signal, since it provides loading and error states, stale-answer protection, and Suspense integration. Keep the longhand form only when the effect does more than load or the signal is written by other actions too.

Does resource.latest prevent Suspense in SolidJS?▼

No. Until the resource resolves once, latest falls through to the ordinary read and still suspends on first load. Use an answered-style helper that checks state and returns latest only after an answer exists if the declaring body must read without suspending.

How do I avoid fallback flashing on refetch in SolidJS?▼

A plain accessor read suspends again on every refetch, swapping the child for the fallback. Use a settled-style read in the child, which suspends only for the first answer and holds the last value through subsequent refetches.

How do I fetch only in the browser with SolidStart SSR?▼

Gate the resource source on a client signal so it returns false during server render. A falsy source skips the fetcher and never suspends, so the server and hydration passes render the empty state and the load starts on the first client effect.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
4

solid-impl-solidstart

Enforce correct SolidStart server and data-loading patterns to prevent hydration errors.

Official
Advanced
adamhjkadamhjk
2

solid-resources

Create reactive data resources with loading and error handling in SolidJS.

Community
Basic
patrickhaahrpatrickhaahr

solidjs

Implement SolidJS reactivity primitives and component patterns for React migration.

Community
Basic
HallinnaHallinna

react-data-fetching

Refactor React data fetching with TanStack Query caching and Suspense.

Community
Advanced