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

[Kalpana-chavhan]

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.