How to resolve racing conditions when loading the iframe

If you experience issues with Flatfile getting stuck during initial loading the most likely issue is that you are mounting the Provider and opening the portal simultaneously.

If both are done at the same time, then the space is created before the iFrame is fully loaded - which means the SDK sends information of the created space too early.

Here is one option to resolve this:

Disable Preloading

Add the preload configuration option to your FlatfileProvider:

<FlatfileProvider 
  publishableKey={your_key}
  config={{ preload: false }}
>
  // Your Flatfile components
</FlatfileProvider>

Note: Disabling preload may result in a slightly longer initial load time (approximately 3 seconds) before the interface appears.

How to address slow loading caused by Preload: false

1. Create a loading state when the user initiates the import action

2. Load the Flatfile provider with your custom loading component

3. Mount the Space component only after detecting that the iframe has fully loaded

Example implementation:

const YourComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [isFlatfileReady, setFlatfileReady] = useState(false);

  const handleImportClick = () => {
    setIsLoading(true);
    // Your loading detection logic here
  };

  return (
    <>
      {isLoading && <YourLoadingComponent />}
      {isFlatfileReady && (
        <FlatfileProvider publishableKey={process.env.NEXT_PUBLIC_FLATFILE_KEY}>
          <Space config={your_config}>
            <Workbook config={your_workbook_config} />
          </Space>
        </FlatfileProvider>
      )}
    </>
  );
};

Best Practices

• Ensure the FlatfileProvider component is mounted before attempting to show the iframe

• If loading Flatfile on-demand, implement proper loading states to provide feedback to users

• Consider using a custom loading animation to improve user experience during initialization

Conclusion:

If the above do not work then more troubleshooting will be required.