chore: mitigate not rendering with delay

Author: r0b1n

packages/pluggableWidgets/maps-web/CHANGELOG.md

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- We mitigated the issue with Maps widgets not rendering in some cases.
+
 - We fixed an issue where GoogleMap and LeafletMap uses array index for the list item which causes issues when filtering large amounts of locations. Thanks to @jeroen-huizer-conclusion for the contribution.
 
 - We fixed an issue where where browser console throw warning of unknown listener when the location has title in LeafletMap. Thanks to @jeroen-huizer-conclusion for the contribution.

packages/pluggableWidgets/maps-web/src/components/MapSwitcher.tsx

@@ -1,9 +1,32 @@
-import { ReactElement } from "react";
+import { PropsWithChildren, ReactElement, ReactNode, useEffect, useState } from "react";
 import { GoogleMapContainer, GoogleMapsProps } from "./GoogleMap";
 import { LeafletMap, LeafletProps } from "./LeafletMap";
 
 interface SwitcherProps extends GoogleMapsProps, LeafletProps {}
 
 export const MapSwitcher = (props: SwitcherProps): ReactElement => {
-    return props.mapProvider === "googleMaps" ? <GoogleMapContainer {...props} /> : <LeafletMap {...props} />;
+    return props.mapProvider === "googleMaps" ? (
+        <GoogleMapContainer {...props} />
+    ) : (
+        <Delayed delay={1000}>
+            <LeafletMap {...props} />
+        </Delayed>
+    );
+};
+
+type DelayedProps = {
+    delay: number;
+} & PropsWithChildren;
+
+const Delayed = ({ children, delay }: DelayedProps): ReactNode => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setIsVisible(true);
+        }, delay);
+        return () => clearTimeout(timeout);
+    }, [delay]);
+
+    return isVisible ? children : null;
 };