I have a loading.tsx page and a page.tsx in my app root directory where data is being fetched and mapped.

data.map((card: Card, idx) => {
          return (
            <Suspense fallback="test...">
              <RecipeCard key={idx} name={card.display.displayName} trackingId="replaceLater" img={card.display.images[0]}  rating={card.content.details?.rating} tags={card.content.tags}  time={card.content.details?.totalTime} description={card.content.description?.text}/>
            </Suspense>
)

I want some form of loading page or maybe a skeleton to show up before it gets rendered as the API is really fucking slow.
See the image for my directory.