Feedback patterns

// Inline spinner (in button)

  
  Saving...


// Page spinner (centered)

  


// Overlay spinner (blocking)

  

// Success — brief, no action needed
toast.success("Changes saved")

// Error — explain what happened, offer action
toast.error("Failed to save changes", {
  description: "Check your connection and try again",
  action: { label: "Retry", onClick: handleRetry }
})

// Warning — alert to potential issue
toast.warning("Unsaved changes", {
  description: "Your changes will be lost if you leave"
})

// Info — neutral information
toast.info("New version available")

// First-time empty state

  
  
No projects yet
  

    Get started by creating your first project.
  
  
    
    Create Project
  


// No search results

  
  
No results found
  

    Try adjusting your search or filters.
  
  
    Clear filters
  


// Error state

  
  
Failed to load
  

    Something went wrong. Please try again.
  
  
    
    Retry
  

// Determinate

  

    Uploading...
    75%
  
  

    

  


// Indeterminate

  

  {steps.map((step, i) => (
    
      
 currentStep && "bg-muted text-muted-foreground"
      )}>
        {i < currentStep ?  : i + 1}
      
      {i < steps.length - 1 && (
        

      )}
    
  ))}

// Loading a list of items
suggest_feedback_pattern({
  context: 'data-loading',
  contentType: 'list'
})
// Returns: skeleton-card pattern

// Form submission
suggest_feedback_pattern({
  context: 'form-submit',
  dataState: 'success'
})
// Returns: toast-success pattern

// Search with no results
suggest_feedback_pattern({
  context: 'data-loading',
  contentType: 'list',
  dataState: 'empty'
})
// Returns: empty-search pattern

get_feedback_template({
  pattern: 'skeleton-card',
  includeCode: true
})

get_feedback_template({
  pattern: 'toast-success',
  includeCode: true
})

Is data loading?
├── Yes → Is layout known?
│   ├── Yes → Is it expected to take > 500ms?
│   │   ├── Yes → Use skeleton
│   │   └── No → Use spinner (or nothing for < 200ms)
│   └── No → Use page spinner
└── No → Is there data?
    ├── Yes → Show content
    └── No → What's the reason?
        ├── First time → Empty state with CTA
        ├── No results → Empty state with "clear filters"
        └── Error → Error state with retry

// Spinner for known layout

  {isLoading ?  : }


// Skeleton that matches the layout

  {isLoading ?  : }

// Unhelpful empty state
No data

// Contextual empty state with action
}
  title="No projects yet"
  description="Create your first project to get started."
  action={Create Project}
/>

// Error disappears before user can read it
toast.error("Failed to save", { duration: 3000 })

// Error persists until acknowledged
toast.error("Failed to save", {
  duration: Infinity,
  action: { label: "Retry", onClick: handleRetry }
})