isLoading を利用してUIの出し分けをする場合、画面初期描画時に一瞬だけ分岐先のComponentが表示されてしまう問題の解決策

ページの初期描画時にAPIのフェッチが終わるまでは null を返し、一度初期フェッチが終わった後は loading によって2つのコンポーネントを出し分ける場合

const [isLoading, setLoading] = useState(false);
const [isLoaded, setLoaded] = useState(false);

useEffect(() => {
  (async (): Promise<void> => {
    setLoading(true);  
    try {
      // Request API
      const response = await fetchFunc();
    } catch {
      // Error handling
    }
  })().finally(() => {
    setLoading(false);
    setLoaded(true);
}, [])

return (
  <>
    // loading に関係なく表示するUI
    <ComponentA />
    {isLoading ? <Loading /> : null}
    // NG: 画面初期表示時は isLoading がデフォルトで false である かつ data も null なので一瞬 NullComponent が表示される
    {!isLoading ? data ? <ComponentB /> : <NullComponent /> : null}
    // OK: isLoaded が true の時は data が null ではない時なので、一瞬 NullComponent が表示されることはない
    {isLoaded ? data ? <ComponentB /> : <NullComponent /> : null}
  </>
);