react-ui-patterns

Show a loading indicator only when loading is true and no data exists yet. Checking loading alone causes spinners to flash over cached data during refetches, 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. Combine the disabled state with form validity so users cannot trigger multiple async operations.

Follow an error hierarchy: inline messages for field validation, toasts for recoverable errors, banners for page-level issues, and full error screens for unrecoverable failures. Never swallow errors with only a console log.

The component likely lacks an empty state for the collection. Render an explicit empty state component with an icon, title, description, and optional action when the data array is empty.