I have this piece of code here that fetches the products from a server, I have added the data fetching part inside an async component but the loading... text does not show while the data is loading does anyone know why this behaviour is happening or what am I doing wrong here.

import React, { Suspense } from 'react';
import { pubRequest } from '@/utils';
import { ProductCard } from '@/components';
import { ProductType } from '@/types/product';

const LoadProducts = async () => {
  const { data } = await pubRequest.get<{ products: ProductType[] }>('/product');

  return data.products.map((product) => <ProductCard key={product._id} product={product} />);
};

const Home = () => {
  return (
    <>
      <div className="text-sm flex" />
      <Suspense fallback={<>Loading....</>}>
        <LoadProducts />
      </Suspense>
    </>
  );
};

export default Home;