So I have a Product component let's say, that has some props like name, price. I can render this component from many data sources, but one of them is an API. That API endpoint returns an interface called IProductDef.

To have a way to render that Product from that interface, I created a ProductDefWrapper component, that takes in that interface as a prop, and then "translates" that to the props that the Product component is looking for. So something like

<Product name={productDef.name} price={productDef.price} />

I then however, want to render that Product from the api in a page, but I do not want the rest of the page to wait for that API to be fetched before it renders, I'd rather just have that specific component show a loader and take how much ever time it needs

So that made me creat a ProductDefFetcher component, that just takes in an id, awaits the API call for the data, and then renders out the component using ProductDefWrapper.

...but now I also want to show a suspense, and I can't do that in the component itself, and I don't want to have to wrap it in a suspense on every single page that I want to show this on. So I felt the need to now make a ProductDefFetcherSuspense component, that also takes in the id, but then wraps the ProductDefFetcher in a nice skeleton loader.

Really feels like this is extremely overengineered, but I am not sure how else I would approach this. Would love to hear some thoughts here