Multi-Page Application Loading Indicator

Build a multi-page React application with a centralized loading indicator that can be controlled from any component in the application. The loading indicator should appear at the top of the page and be accessible throughout the entire component tree without prop drilling.

Requirements

Application Structure

Create a small multi-page application with the following components:

1. App Component: The root component that wraps the entire application
2. Navigation Component: A navigation bar with links to different pages
3. Home Page: A simple landing page with a button to trigger data loading
4. Dashboard Page: A page that displays data and has multiple child components that can trigger loading states
5. Profile Page: A page with a form that shows loading during submission

Loading Indicator Behavior

The loading indicator must:

• Be visible at the top of the viewport across all pages
• Be controllable from any component without passing props down the tree
• Show smooth loading animations when activated
• Automatically complete and hide when the loading operation finishes

Test Cases

• When the app loads, the loading bar should not be visible @test
• Clicking the "Load Data" button on the Home page shows the loading bar, and it completes after 2 seconds @test
• On the Dashboard page, clicking "Refresh Stats" in a nested component triggers the loading bar @test
• Submitting the form on the Profile page shows loading and completes after processing @test

Implementation

@generates

API

import React from 'react';

// Root App component that sets up the application
export default function App(): JSX.Element;

// Navigation component with links
export function Navigation(): JSX.Element;

// Home page with data loading feature
export function HomePage(): JSX.Element;

// Dashboard page with nested components
export function DashboardPage(): JSX.Element;

// Profile page with form
export function ProfilePage(): JSX.Element;

Dependencies { .dependencies }

react-top-loading-bar { .dependency }

Provides a customizable top-loading bar component with context-based control for React applications.

react { .dependency }

Core React library for building user interfaces.

react-router-dom { .dependency }

Provides routing capabilities for navigation between pages.