OpenLayers noticable freeze when loading features

Question

My application loads data from REST api as array of JSON objects. Application is a mix of standard UI with map capabilities, so each object contains standard fields as well as geometry as WKT.

interface Zone {
    id: number;
    name: string;
    geometry: string;
}

Whole loading loop looks like this:

• user enters route myfrontendapp.com/ports/:portId/zones. He would like to see zones for port with :portId,
• frontend sends GET request and receives data in Zone[] format,
• zones: Zone[] gets mapped so new React component is created for every zone,
• inside every newly created React component, useEffect(()=> loadingLogic(), []) loads geometry from zone.geometry using new WKT() and adds it to proper map source so it can be displayed

I noticed that there is slight delay before features load into the map. Whole app is completly unoperatable meaning browser doesn't respond to any events and everything just freezes. It is not a long delay because it is only ~100ms but it has very strong impact on UX.

Is there a way to somehow load these features asynchronously? I'd be willing to give up loading time (it could even load 5x slower) for the sake of app being operatable while its loading features.

Answer 1

So I am not entirely sure why that happens but it just works slow in React's dev environment.

After building app and serving it directly from dist it works blazingly fast.

(I think it still would be cool to somehow be able to load things asynchronously)