AOSSIE-Org / AOSSIE-Org/InPactAI

[UX/ENHANCEMENT] : Implement Centralized Loading States and Empty State Components

Offen
#269 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
102
Forks
144
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

## Overview
As InPactAI scales, many of our features (Dashboard analytics, AI insights, and Sponsorship feeds) rely on asynchronous data fetching. Currently, the application lacks a consistent strategy for handling "Empty" or "Loading" states, often leading to blank screens or sudden layout shifts (CLSR).

## Proposed Solution
I propose creating two reusable UI components to standardize the user experience across the platform:

1. **Skeleton Loader System:** Instead of blank screens or simple spinners, implement CSS-based skeleton pulses that mirror the layout of the incoming data.
2. **Empty State Component:** A standardized component that handles scenarios where no data is found, including:
- An illustrative icon.
- A clear "Why" (e.g., "You haven't applied for any sponsorships yet").
- A Call to Action (CTA) button to guide the user's next step.

## Areas to Update
- **Creator Dashboard:** Analytics cards.
- **Sponsorship Feed:** List views.
- **AI Insights:** Text generation containers.

## Visual Example (Mental Model)
- **Loading:** Pulsing gray blocks mimicking the card structure.
- **Empty:** "No Sponsorships Found" + [Find Sponsorships] button.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.