AOSSIE-Org / AOSSIE-Org/InPactAI

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

Aberta
#269 0 comentários 0 reações 0 responsáveis Ver no GitHub
Linguagem predominante
TypeScript
Estrelas
102
Forks
144
Métricas de merge de PRs
Nenhum PR com merge em 30d

Descrição

## 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.

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.