I have an async component making a fetch request. This component displays first one part of the response, then some "static" text and finally the last part of the response.

// My async component
export async function MyAsyncComponent() {
  const response = await fetchRequest()

  return (
    <p>{response.first_part}</p>
    <p>some static text</p>
    <p>{response.last_part}</p>
  )
}

My component is wrapped in a <Suspense /> so I can display a skeleton.

<Suspense fallback={<Skeleton className="h-20 w-full" />}>
  <MyAsyncComponent />
</Suspense>

What I want to do is to display instead two skeletons, one for the first part and one for the last part while keeping the static text always visible.

I know that I could create a <MyAsyncComponentSkeleton /> and use it as a fallback but I would duplicate some code.

Is there a better way to handle this situation ?