Loader pattern for intermediate state

react-loader-pattern-for-intermediate-state.js

import React from "react";
import Todo from "./Todo";
import useTodosLoading from "./useTodosLoading";
import React from "react";

const Loader = ({ isLoading, errorMessage, children }) => {
  if (errorMessage) return <Error errrorMessage={errorMessage} />;
  if (isLoading) return <Loading />;
  return children;
};

const TodoList = () => {
  const { isError, todos } = useFetchTodos();
  return (
    <Loader isLoading={!todos.length} errorMessage={isError ? 'Could not load todos.' : undefined} >
      {todos.map((todo) => (
        <Todo {...todo} />
      ))}
    </Loader>
  );
};