How to load multiple .exr maps effeciently?

[finnianj]

I am trying to load 4 .exr maps which can then be toggled through using a piece of state.

The problem is that the useEnvironment hook takes multiple seconds and so I just get a white screen for ages. I'd like to be able to use a 'loadingMap' state to be able to return a loading component while the maps load, but putting the useEnvironment inside a useEffect causes it to crash - I think because hooks have to be at the top level of the component. If I put the path to the .exr file as the files property of Environment directly, then the application freezes while it is being loaded and any spinner/loading state looks rubbish, I think because the loading of the maps occupies the main thread?

How can I load these maps elegently and in the background, and without disrupting my spinner animation?

const [mapIndex, setMapIndex] = useState(0)
const [loadingMap, setLoadingMap] = useState(true)

const berlin = useEnvironment({ files: './environmentMaps/hdri/berlin.exr' });
const garden = useEnvironment({ files: './environmentMaps/hdri/garden.exr' });
const metro = useEnvironment({ files: './environmentMaps/hdri/metro.exr' });
const road = useEnvironment({ files: './environmentMaps/hdri/road.exr' })

const maps = [
         {name: 'Berlin', map: './environmentMaps/hdri/berlin.exr', blendFunction: BlendFunction.SOFT_LIGHT},
        {name: 'Garden', map: './environmentMaps/hdri/garden.exr', blendFunction: BlendFunction.SOFT_LIGHT},
        {name: 'Metro', map: './environmentMaps/hdri/metro.exr', blendFunction: BlendFunction.HARD_LIGHT},
        {name: 'Road', map: './environmentMaps/hdri/road.exr', blendFunction: BlendFunction.SOFT_LIGHT}
    ]

and then the Environment component renders the relevant map:

return (
<>
   {loadingMap && <Loading /> }
   <Environment
        background
        files={maps[mapIndex].map}
   />
</>
)

[finnianj]

Solved by using EXRLoader --- this is seemingly advantageous to useEnvironment with disrupts the main thread

import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader';
import * as THREE from 'three';

export const loadExrTexture = (url: string): Promise<any> => {
    return new Promise((resolve, reject) => {
        const loader = new EXRLoader();
        loader.load(url, (texture) => {
            texture.mapping = THREE.EquirectangularReflectionMapping;
            resolve(texture);
        }, undefined, (error) => {
            reject(error);
        });
    });
};