Data Fetching Progress Indicator

Build a React component that displays a loading indicator during a data fetch operation that takes approximately 5 seconds to complete.

Requirements

Create a DataFetcher component that:

1. Displays a "Fetch Data" button that initiates a simulated data fetch operation
2. Shows a top-of-page loading indicator during the fetch operation
3. Automatically starts the loading indicator when the fetch begins
4. Configures the loading indicator to update every 200 milliseconds for a smooth animation
5. Automatically completes and hides the loading indicator when the fetch finishes
6. Displays the fetched data (a simple success message) after loading completes

The simulated fetch should take approximately 5 seconds using setTimeout.

Visual Requirements

The loading indicator should:

• Be displayed at the top of the viewport
• Use a green color (#10b981)
• Have a height of 4 pixels
• Show a smooth, continuous animation that updates frequently

Test Cases

• Clicking the "Fetch Data" button initiates loading and starts the loading indicator @test
• The loading indicator updates its progress automatically during the fetch operation @test
• The loading indicator completes and disappears when the fetch finishes after 5 seconds @test

Implementation

@generates

API

import React from "react";

/**
 * A component that demonstrates a loading indicator during a data fetch operation.
 *
 * Fetches data when the user clicks a button, displaying a top-loading bar
 * that updates smoothly during the fetch process.
 */
export default function DataFetcher(): JSX.Element;

Dependencies { .dependencies }

react-top-loading-bar { .dependency }

Provides a customizable top-loading bar component with automatic progress animation capabilities.

@satisfied-by