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(() => {
                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 =;
    return (
            <p>Age: {user.age}</p>

function ProfilePage() {
    return (
        <Suspense fallback={<div>Loading profile...</div>}>
            <ProfileDetails />
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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Suspense Data Fetching</title>
    <div id="app"></div>

    <script src=""></script>
    <script src=""></script>
    <!-- Our React component script here -->
    <script type="module">
        // Our previous JavaScript code snippets will be inserted here
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.