🎨 UI Elements & Interactions

Bottom sheets are modal dialogs that slide up from the bottom of the screen. They're used for various actions and information display throughout the app.

Common Uses

• Creating Posts: Community post creation form
• Community Info: Detailed community information
• Comments: Viewing and adding comments
• Share Options: Sharing content with various methods
• Match Filters: Filtering matches by teams/participants
• Post Details: Full community post content

Interacting with Bottom Sheets

To interact with bottom sheets:

• Tap outside the sheet or swipe down to dismiss
• Scroll within the sheet if content is long
• Tap buttons or options within the sheet
• Some sheets can be dragged to resize

Loading indicators show when the app is fetching data or processing actions:

Loading Spinners

Circular spinners appear when:

• Loading articles or content
• Fetching match data
• Processing actions (like generating AI summaries)
• Refreshing statistics

Skeleton Loaders

Placeholder content that appears while loading:

• Article card placeholders
• Match card placeholders
• List item placeholders
• Provides visual feedback during loading

The app displays error messages when something goes wrong:

Error Messages

Common error scenarios:

• Network Errors: "Unable to connect. Please check your internet."
• Not Found: "Page not found" or "Content not available"
• Permission Errors: "You don't have permission to perform this action"
• Validation Errors: "Please fill in all required fields"

Retry Options

When errors occur, you can usually:

• Tap "Retry" to try again
• Refresh the page or content
• Go back and try a different action
• Check your internet connection

Error Dialogs

Some errors appear in dialog boxes with:

• Clear error message
• Explanation of what went wrong
• Suggested actions to resolve
• Dismiss or retry buttons

Cards

Content is often displayed in cards:

• Article cards
• Match cards
• Tournament cards
• Team cards
• Tap on cards to view details

Tabs

Tabs organize content into sections:

• Profile tabs (Profile, Activities, Stats)
• Community tabs (Home, Tournaments, Teams, etc.)
• Match tabs (Info, Scorecard, Commentary)
• Tap tabs to switch between sections

Action Buttons

Common action buttons throughout the app:

• Primary buttons (colored, for main actions)
• Secondary buttons (outlined, for alternative actions)
• Icon buttons (for quick actions like share, like, bookmark)
• Floating action buttons (for primary actions on a screen)