Using Suspense with Data Fetching

Show how to use React Suspense to fetch data and display a loading indicator while waiting for the data to load.

function fetchUserData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                name: 'John Doe',
                age: 30
            });
        }, 1500); // Simulate a network delay
    });
}

This is a mock function to simulate fetching data from an API endpoint. It returns a promise that resolves after 1.5 seconds with some user data.

import React, { Suspense, useState, useEffect } from 'react';

const resource = fetchUserData();

function ProfileDetails() {
    const user = resource.read();
    return (
        <div>
            <h1>{user.name}</h1>
            <p>Age: {user.age}</p>
        </div>
    );
}

function ProfilePage() {
    return (
        <Suspense fallback={<div>Loading profile...</div>}>
            <ProfileDetails />
        </Suspense>
    );
}

This code includes React components that use Suspense. `resource` is initialized by calling the `fetchUserData` function. `ProfileDetails` tries to read the user's data, which might not be available immediately. `ProfilePage` wraps `ProfileDetails` in a `Suspense` component, specifying a fallback UI to display while the data is loading.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suspense Data Fetching</title>
</head>
<body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    
    <!-- Our React component script here -->
    <script type="module">
        // Our previous JavaScript code snippets will be inserted here
    </script>
</body>
</html>

Basic HTML skeleton with React included through CDN links. The React component script will be placed inside the script tag with the `module` type. The component script would be the content of the JavaScript code snippets provided previously.

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
}

Basic CSS styling for the body element to make the text more readable and to add some padding around the content.