Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →sickn33/react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching.
Passed 26 of 26 test cases with the skill, and 24 of 26 without it.
2 fixed24 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
In a React component fetching GraphQL query data, which condition should be evaluated first in conditional render guards: the error check or the loading check?
| Checked | Without skill | With skill |
|---|---|---|
| Evaluate the error state check before evaluating the loading state check | Missed | Passed |
The instructions your model reads when the skill loads.
Show loading indicator ONLY when there's no data to display.
// CORRECT - Only show loading when no data exists
const { data, loading, error } = useGetItemsQuery();
if (error) return <ErrorState error={error} onRetry={refetch} />;
if (loading && !data) return <LoadingState />;
if (!data?.items.length) return <EmptyState />;
return <ItemList items={data.items} />;
// WRONG - Shows spinner even when we have cached data
if (loading) return <LoadingState />; // Flashes on refetch!
Is there an error?
→ Yes: Show error state with retry option
→ No: Continue
Is it loading AND we have no data?
test cases passed, vs 24 / 26 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.