This is my first time using the React.Suspense component.
But the “Loading” component is not shown.

Here is my code:

App.js

import RosterViewer from './test/RosterViewer';
function App() {
    return <RosterViewer/>
}

RosterViewer.js

import Loading from "../components/common/Loading";
import React, { Suspense } from 'react';

export default function RosterViewer() {
    let RosterTable = React.lazy(() => import('./RosterTable'));
    return (
        <Suspense fallback={<Loading />}>
            <RosterTable />
        </Suspense>);
}

RosterTable.js

import { useRosterViewer } from "./useRosterViewer";
import handleAPIError from "../components/common/handleAPIError";
export default function RosterTable(){
    const { error,data } = useRosterViewer();
    if (error) {
        return handleAPIError(error);
    }
    return(
        <div>{((data===null)?"true":"false")}</div>
    );
}

useRosterViewer.js

import { useEffect, useReducer } from "react";

import FetchAPI from "./FetchAPI";
let reducer = (state, action) => {
    let result = { ...state };
    switch (action.type) {
        case "init":
            result.data = action.data;
            break;
        case "setError":
            result.error = action.error;
            break;
        default:
            break;
    }
    return result;
}
export function useRosterViewer() {
    const [itemList, updateItemList] = useReducer(reducer, {
        data:null,
        error:null,
    });
    useEffect(() => {
        let fetchAPI = new FetchAPI();
        let getData = async () => {
            try {
                let response = await fetchAPI.fetch(null,"get","https://data.etabus.gov.hk/v1/transport/kmb/stop");
                updateItemList({
                    data:response.data,
                    type: "init"
                });
            } catch (error) {
                console.log(error);
                updateItemList({ "error": error, "type": "setError" });
            }
        }
        getData();
    }, []);
    //==============================================================================================================================    

    return {
        data:itemList.data,
        error: itemList.error
    }
}

FetchAPI.js

import axios from "axios";
export default class FetchAPI {
    #api;
    constructor() {
        //================================================================================================================
        // create and configure an axios instance
        // src:/questions/76116501/axios-response-interceptor-strange-behavior?noredirect=1#comment134237075_76116501
        this.#api = axios.create();
        this.#api.interceptors.response.use(
            null, // default success handler
            (error) => {
                //console.log(error.toJSON());
                return Promise.reject({
                    status: error.response?.status,
                    message:
                        error.response?.data ?? error.response?.statusText ?? error.message,
                });
            },
            {
                synchronous: true, // optimise interceptor handling
            }
        );
    }
    async fetch(data, method, url, responseType, headers) {
        const requestObj = {
            url,
            method,
            responseType,
            headers,           
            [method.toLowerCase() === "get" ? "params" : "data"]: data,
        };

        return await this.#api(requestObj); // use the created instance
    }

}

Loading.js

export default function Loading(){    
    return <div className="modalBackground"><img src="/icon.gif" /></div>
}

I expect the “Loading” component to be shown on screen.
Unfortunately, only the word “true” or “false” is shown on screen.