In following code, Sample uses a async function to get some data. I will be using that data to update the Redux store so any component can access the username within the application.

const resource = fetchData();

function Sample() {
    // throws a promise when retrieving data
    const name = resource.read();

    const dispatch = useDispatch();
    dispatch(setUsername(name));

    const username = useSelector((state) => state.username);

    return <div>User: {username}</div>;
}

<Suspense fallback="loading....">
    <Sample />
</Suspense>

Here, lets assume there is no way my application can proceed without the username. Well, <Suspense> at parent level achieves that up until data are fetched from the resource. However, there is a slight gap from Redux event dispatch to <Sample> component re-render where is displays User: instead of loading.... (event don't force the re-render immediately so username is empty). So I will see following content in the web page in the same order

loading.... --> User: --> User: Srinesh

So my requirement is to show loading.... until store is updated. On the web page, I'm expecting to see,

loading.... --> User: Srinesh

Is there a way to achieve this without using another condition at <Sample> component level to show loading.... if the username is null?