react-ui-patterns

Show a loading indicator only when loading is true and no data exists yet. Checking loading alone causes spinner flashes on refetch when cached data is already displayed, so always gate the spinner on the absence of data.

Use skeletons when the content shape is known, such as list or card layouts and initial page loads. Use spinners for unknown content shapes, modal actions, button submissions, and inline operations.

Disable the submit button while the mutation is in flight and show a loading indicator on it. Combining disabled={isSubmitting} with an isLoading prop blocks repeated taps and gives the user clear feedback.

Always surface mutation errors to users through an onError handler that triggers a toast, inline message, banner, or full error screen depending on severity. Logging to the console alone leaves users unaware that the action failed.

The component likely lacks an explicit empty state for zero-item collections. Render a dedicated empty state with an icon, title, description, and optionally a call-to-action such as creating the first item.