我想在反应中显示负载

Question

当前代码仅显示“完成！！！”结束工作后（大约3秒钟）。我想显示“完成！！！”首先在“正在加载...”之后。

import React, { useState, useEffect, useCallback } from "react";

const App = () => {
    const [loading, setLoading] = useState<boolean>(false);
    const [workingResult, setWorkingResult] = useState<string>();

    const runWorking = useCallback(async () => {
        // working.... (during about 3 seconds)
        var start = new Date().getTime();
        while (new Date().getTime() < start + 3000);

        return "Done !!!";
    }, []);

    const setWorking = useCallback(async () => {
        setLoading(true);
        setWorkingResult(await runWorking());
        setLoading(false);
    }, [runWorking]);

    useEffect(() => {
        setWorking();
    }, [setWorking]);

    return <div>{loading ? "Loading..." : workingResult}</div>;
};

export default App;

Answer 1

此方法：

const setWorking = useCallback(async () => {
    setLoading(true);
    const response = await runWorking()
    setWorkingResult(response);
    setLoading(false);
}, [runWorking]);