Data Dashboard with Loading States

Build a React dashboard that displays user information with loading indicators controlled through context.

Overview

Create a simple React dashboard with two sections that fetch data independently. Each section should control a shared top loading bar without prop drilling, using a context-based approach.

Requirements

Your application should include:

1. App Component - Root component that:

   • Wraps the dashboard with a loading bar context provider
   • Renders the loading bar component at the top
   • Contains the dashboard sections

2. User List Section - A component that:

   • Has a "Load Users" button
   • Fetches user data when the button is clicked
   • Shows the loading bar during the fetch
   • Displays the list of user names when loaded

3. Posts Section - A component that:

   • Has a "Load Posts" button
   • Fetches post data when the button is clicked
   • Shows the loading bar during the fetch
   • Displays the count of posts when loaded

Behavior

• Each section should independently control the loading bar using context
• The loading bar should start when a fetch begins
• The loading bar should complete when a fetch finishes (success or error)
• Both sections should be able to trigger loading without interfering with each other

API Endpoints

Use the JSONPlaceholder API:

• Users: https://jsonplaceholder.typicode.com/users
• Posts: https://jsonplaceholder.typicode.com/posts

Implementation

@generates

Test Cases

• Clicking "Load Users" button shows loading bar and displays user names when complete @test
• Clicking "Load Posts" button shows loading bar and displays post count when complete @test
• Loading bar appears at the top of the viewport @test

Dependencies { .dependencies }

react-top-loading-bar { .dependency }

Provides the top loading bar component with context-based control for managing loading states across the component tree.

@satisfied-by