I would like to have a component that fetches data once it's visible:
I'm using a Popover component from shadcn-ui (based on Radix-ui), which has the following structure:

 <Popover>
      <PopoverTrigger asChild>{children}</PopoverTrigger>
      <PopoverContent className="...">
       {//use content here}
      </PopoverContent>
 </Popover>

(https://streamable.com/wj4xj5)
Now this leads to the {children} being clickable, once they have been clicked the <PopoverContent> will be rendered relative to the position of the <PopoverTrigger>, now what I would like to happen is the following.:
Because I'm fetching data in this component based on the props given to it:

export const WordInformationCard: React.FC<WordInformationCardProps> = async ({
  // data
}) => {
  const wordCardData = await WordDataFromBackendCall(/*SomeThingBasedOnData*/)
  // return Popover component from above with data from wordCardData

I would like to fetch the data only once the <PopoverTrigger> was triggered, so that I can show a loading skeleton for the <PopoverContent> and not load the data without ever needing to show it.

I hope this makes sense. If not I apologize and I would be glad if I could share more details if needed.

I have a big collection of those components and would like to not fetch all the data from them, because they most likely not all be needed, so I want to fetch the data for those that are needed, when they are needed.