I'll show you several examples of loading states for AI applications, from simple indicators to more sophisticated streaming approaches.

These examples demonstrate different approaches to handling loading states in AI applications 1:

1. Simple Spinner

• Uses a basic loading spinner with "Thinking..." text
• Good for quick responses where you want minimal visual distraction
• Disables input during loading to prevent multiple requests

2. Skeleton Loading

• Shows placeholder content that mimics the structure of the actual response 2
• Provides users with a better sense of what's coming
• More visually appealing than simple spinners for longer responses

3. Typing Indicator

• Animated dots that simulate someone typing
• Creates a more conversational, human-like experience
• Familiar pattern from messaging applications

4. Streaming Response

• Shows content as it's being generated, word by word
• Most engaging approach for longer responses 1
• Users can start reading while content is still being generated
• Includes a blinking cursor to indicate active generation

Key Implementation Notes:

• Status Management: Use loading states to disable inputs and show appropriate feedback 3
• User Experience: Provide immediate visual feedback when a request is submitted
• Error Handling: Consider how to handle and display errors during the loading state 3
• Accessibility: Ensure loading states are announced to screen readers

The streaming approach is particularly effective for AI applications as it provides immediate feedback and keeps users engaged during longer response times 1.