Basic-component-w-loading.tsx

import React from 'react';

type State = {
    isLoading: boolean;
    data: object;
};

const initialState = {
    isLoading: true,
    data: undefined,
}

export const EditProgramMsgs = ({ id }) => {
    const [state, setState] = React.useState<State>(initialState);

    React.useEffect(() => {
        (async () => {
            let dataPromise: Promise<DataType>;
            if (id) {
                const d = await fetch(...);
                setState({
                    isLoading: false,
                    data: d,
                });
            }
        })();
    }, []);

    if (state.isLoading) return <div className="section--loading">Loading...</div>;

    return (
        <>
            { state.data.stuff }
        </>
    );
};