Dealing with no content being visible on the first cycle

[hsjoberg]

Hi everyone.
As explained in the docs about onLoad(), in first cycle of FlashList no items will be seen. This is because the items will first figure out their height, before anything will be visible to the user.

  /**
   * This event is raised once the list has drawn items on the screen. It also reports @param elapsedTimeInMs which is the time it took to draw the items.
   * This is required because FlashList doesn't render items in the first cycle. Items are drawn after it measures itself at the end of first render.
   * If you're using ListEmptyComponent, this event is raised as soon as ListEmptyComponent is rendered.
   */
  onLoad?: (info: { elapsedTimeInMs: number }) => void;

This results in a visible flash of no content for brief time before the items arrive.
Previously I've used ScrollView in my app to handle content (yes, I do know this is very bad practice). In that case it would initially take longer to do a screen transition, but the content would then be there immediately, resulting in a nicer experience, in my opinion.

My question is: What are some common ways to deal with this flash of no content?

I figured that perhaps a loading indicator could be used, or as with the Shop app, "blank placeholder" graphics are used to wait in the rendering.
If these two things are the recommended practice, how would one go ahead and implement this in the best way?

Also, I'm testing with production build.

[vincentsartoko]

Did you manage to find any hints?

[hsjoberg]

Unfortunately, no.

I suppose this is just the way things are.