Skip to content

Add Loading Skeletons for Organization & Member Pages Across All Components #2852

@dhirukumar

Description

@dhirukumar

This issue extends the work from
➡️ Missing Skeleton Loading State in Snapshot & About Pages (#2673)
which addressed skeleton loading states in the Snapshots and About sections

Description

Across the OWASP Nest frontend, most feature areas use consistent Skeleton loading components (e.g. Projects, Contributors, Chapters, Organizations list).
However, the following pages still show a blank UI or a simple spinner during data loading:

  • Organization Page
    Home → Organizations → OWASP

  • Member Profile Page
    Home → Members → Bkimminich

This creates a UI/UX inconsistency because the rest of the platform uses skeleton-based loading states, while these pages do not.


🔍 Observed Behavior

When visiting these pages:

  • The UI displays a plain loading spinner or empty layout
  • No card-based skeletons are shown
  • The experience feels disconnected from the rest of the platform’s design system

Expected Behavior

These pages should use the same loading pattern as other major sections:

  • Show card-style skeleton loaders instead of empty containers
  • Maintain layout consistency during loading
  • Avoid layout shifting on data load
  • Provide a smooth and unified user experience across all entity pages

Why This Matters

  • Ensures consistent UI/UX across the entire platform
  • Matches design standards already used throughout OWASP Nest
  • Eliminates blank or jarring transitions when data loads

Proposed Fix

Organization Page (Home → Organizations → OWASP)

Add skeleton loaders for:

  • Page title & header
  • Organization Details card
  • Statistics card
  • Top Contributors grid
  • Repositories section
  • Any tab-based or async data panels

Member Profile Page (Home → Members → {username})

Add skeleton loaders for:

  • Header (avatar, name, bio)
  • User Details card
  • Statistics card
  • Contribution heatmap
  • Tabs (repositories, contributions, orgs)
  • All async-loaded components

Are you going to work on implementing this?

  • Yes
  • No

Additional Context

These pages represent core navigational areas for both organizations and contributors.
Improving their loading experience will make the frontend feel smoother, more stable, and aligned with the overall OWASP Nest design system.

I am ready to implement this once the issue is approved and assigned to me.

Metadata

Metadata

Assignees

Type

No type

Projects

Status

In progress

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions