Loading State Manager

Build a React component that manages application-wide loading states with proper control pattern usage and validation.

Requirements

You need to create a component called LoadingManager that demonstrates proper usage of a loading bar library's different control patterns.

The component should:

1. Provide centralized loading control: Use a context-based approach to allow any child component to trigger loading states
2. Support ref-based control: Implement a separate example showing ref-based control pattern
3. Avoid mixing control patterns: Each loading bar instance should use only one control method

Implementation Details

Create the following components:

LoadingManager Component

• Acts as the main wrapper that provides loading bar functionality
• Should use a context-based control pattern
• Must render a loading bar that can be controlled from child components

PageContent Component

• A child component that uses the context to trigger loading states
• Should simulate an async operation (e.g., data fetching)
• Must properly start and complete the loading indicator

DirectControlExample Component

• Demonstrates ref-based control of a loading bar
• Should show how to use imperative methods
• Must properly initialize and control the loading state

Test Cases

• When PageContent mounts and triggers loading, the loading bar starts and completes after the operation @test
• When DirectControlExample uses ref methods to control loading, the loading state updates correctly @test
• When attempting to control a loading bar with both props and ref simultaneously, appropriate warnings are issued @test

Implementation

@generates

API

import React from 'react';

/**
 * LoadingManager - Main component providing context-based loading control
 */
export const LoadingManager: React.FC<{ children: React.ReactNode }>;

/**
 * PageContent - Child component demonstrating context-based control
 */
export const PageContent: React.FC;

/**
 * DirectControlExample - Component demonstrating ref-based control
 */
export const DirectControlExample: React.FC;

Dependencies { .dependencies }

react-top-loading-bar { .dependency }

Provides a customizable loading bar component with multiple control patterns including ref-based control, state-based control via props, and context-based control via hooks.

@satisfied-by