[@flatfile/react] Occasional infinite loading screen when using { preload : true }

[cauli]

Preamble

This is related to [@flatfile/react].

I believe this issue is being tracked internally within the Flatfile team, but I am creating an equivalent here so that I can track it within my codebase, and also to help other developers with a workaround.

Info here should hold enough information to assist fixing the root cause.

Overview

There's an issue that happens when opening the Embedded Portal using @flatfile/react, with the configuration <FlatfileProvider config={{ preload: true }} />

Conditions to replicate:

• When opening the Flatfile modal on an uncached browser [to simulate: disable cache in the Network tab]
• AND the resources from the Flatfile iframe take long to download [due to bad networking]
• AND FlatfileProvider is configured with preload: true (<FlatfileProvider config={{preload: true}} />) but didn't have time to preload space-init assets like the vendor-{hash}.js file [for example, a React page that automatically opens the modal]

When those conditions are in place, when opening the modal the user will see the "loading bars" forever, with 1 in ~5 chance.

Current investigation status

There seems to be a race condition in the library, when <FlatfileProider config={{preload: true}} />.

It's almost as, if in this case, it assumes the files are loaded, and handles wrongly the event that determines the internal iframe is ready.

Workaround

The options to workaround the issue are

1. Set <FlatfileProvider config={{preload: false}} />, at the cost of a slower first-time open of the modal
2. Move the <FlatfileProvider config={{preload: true}}/> higher in the layout hierarchy, so that the browser would have time to pre-load and cache those resources.
   This might not be possible is you have multiple FlatfileProviders with distinct <Space /> (see this flatfile thread)

So our current workaround is a mix of both:

1. Create a <PreloadFlatfileV4 /> component to place at the root of your layout structure . It guarantees the assets are preloaded as soon as possible. [Important: it should not wrap the whole app component tree]
2. Then, for all other <FlatfileProvider />, use config={{preload: false}} without the penalty of a slower first-time open, because the resources are already preloaded by the browser (should be returning 304 Not Modified in the Network tab)

export function PreloadFlatfileV4({
  publishableKey,
}: {
  publishableKey: string
}) {
  return (
    <FlatfileProvider
      config={{ preload: true }}
      publishableKey={publishableKey}
    >
      {/** We don't need to render any Sheet, this provider is only used to preload resources */}
      <></>
    </FlatfileProvider>
  )
}

[wmwassmann-gh]

This is fantastic - thank you so much for this detailed overview Cauli!