вы можете либо поместить setTimeout(() => send(fetchPizzas()), 1000) в свой useEffect, либо, если какая-либо из этих функций является асинхронной, вы можете использовать State для условной визуализации компонента или нет. Там, где вы возвращаете компонент, который хотите отложить, сделайте что-то вроде: return mustRenderPizza? (ваш фактический компонент пиццы):

теперь в вашем useEffect сделайте что-то вроде диспетчеризации (fetchPizzas().then(result => setTimeout(() => setShouldRenderPizza(true), 1000)))

Проблема

Компонент EmptyResult в настоящее время отображается, когда loading истинно, а состояние pizzas ложно или пусто. Состояние pizzas изначально пусто, а также устанавливается в [], когда действие fetchPizzas находится в ожидании.

Решение

Если вы хотите отображать EmptyResult только после загрузки данных, выберите другое значение: [] — «полученные данные и пустые» и [....] — «полученные данные и заполненные», чтобы различать состояния и условия загрузки. Здесь можно использовать undefined или null, чтобы указать, что данные еще не были получены/загружены и что их легко проверить в пользовательском интерфейсе.

const initialState: PizzasState = {
  pizzas: undefined, // <-- initially undefined
  loading: false,
  error: null,
  count: 0,
};

const pizzasSlice = createSlice({
  name: 'pizzas',
  initialState,
  extraReducers: (builder) => {
    builder.addCase(fetchPizzas.pending, (state) => {
      state.loading = true;
      // state.pizzas = []; // <-- Don't update yet
      state.error = null;
      state.count = 0
    });
    builder.addCase(fetchPizzas.fulfilled, (state, action) => {
      state.pizzas = action.payload.items; // <-- update to "loaded" value
      state.error = null;
      state.count = action.payload.count;
      state.loading = false;
    });
    builder.addCase(fetchPizzas.rejected, (state, action) => {
      state.pizzas = []; // <-- update to "loaded" value
      state.count = 0;
      state.error = action.payload
        ? action.payload.message
        : action.error.message;
      state.loading = false;
    });
  },
});

Обновите пользовательский интерфейс, чтобы проверить наличие загруженных данных undefined/null.

const skeletons = [...new Array(4)].map((_, index) => (
  <PizzaSkeleton key = {index} />
));

const Home: FC = () => {
  const { pizzas, loading, error, count } =
    useAppSelector((state) => state.pizzas);
  const { categoryID, searchValue, currentPage, sortNameObj } =
    useAppSelector((state) => state.filter);
  const dispatch = useAppDispatch();

  const handleChangeEventCategory = useCallback((index: number) => {
    dispatch(setCategoryID(index));
    dispatch(setCurrentPage(1));
  }, []);

  useEffect(() => {
    dispatch(fetchPizzas())
  }, [categoryID, searchValue, sortNameObj, currentPage])

  const handleChangeEventPage = (page: number) => {
    dispatch(setCurrentPage(page));
  };

  if (error) {
    return <EmptyResult title='Произошла ошибка' />;
  }

  // Check if pizzas is a defined array and empty
  if (!loading && (Array.isArray(pizzas) && !pizzas.length)) {
    return <EmptyResult title='Пиццы не найдены' />;
  }

  return (
    <div className = {styles.home__container}>
      <div className = {styles.content__header}>
        <Categories
          handleChangeEventCategory = {handleChangeEventCategory}
          value = {categoryID}
        />
        <Sort sortNameObj = {sortNameObj} />
      </div>
      <h2>Все пиццы</h2>
      <section className = {styles.content__list}>
        {loading
          ? skeletons
          : pizzas?.map((item) => (
            <PizzaCard
              key = {item.id}
              item = {item}
              pizzaImg = {pizzaImagesMiddle[item.title]}
            />
          ))
        }
      </section>
      <Pagination
        handleChangeEventPage = {handleChangeEventPage}
        currentPage = {currentPage}
        itemsLength = {count}
      />
    </div>
  );
};