NextJS 13 loading component for every component

Question

I am trying to learn nextjs by building a watchlist, currently, I am creating the item component that will hold the prices. What I am trying to accomplish is to display all the prices but if a call is taking a while I want that component to render the loading component. For example

   {/* @ts-expect-error Server Component */}
   <PriceFetch sleepTime="100"></PriceFetch> 
   {/* @ts-expect-error Server Component */} 
   <PriceFetch sleepTime="1000"></PriceFetch>
   {/* @ts-expect-error Server Component */} 
<PriceFetch sleepTime="10000"></PriceFetch>

what I want to happen is the first component loads while the other two still show loading the 2nd two load up. SleepTime is a promise that sleeps for that time. I have attached a picture of what my app directory looks like.

I have tried using states, but I want to avoid doing that so I can have the component be a serverside component

Answer 1

realized I can do it by wrapping my own suspense lol. Ie

        <Suspense fallback={<h1>Loading profile...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="10"></PriceFetch>
    </Suspense>
    <Suspense fallback={<h1>Loading 2...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="100"></PriceFetch>
    </Suspense>
    <Suspense fallback={<h1>Loading profile3...</h1>}>
      {/* @ts-expect-error Server Component */}
      <PriceFetch name="1000"></PriceFetch>
    </Suspense>