flush sync root render

Author: zoran995

lib/Views/render.jsx

@@ -1,4 +1,5 @@
 import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
 
 import Variables from "../Styles/variables.scss";
 import UI from "./UserInterface";
@@ -7,12 +8,14 @@ export default function renderUi(terria, allBaseMaps, viewState) {
   const container = document.getElementById("ui");
   const root = createRoot(container);
 
-  root.render(
-    <UI
-      terria={terria}
-      allBaseMaps={allBaseMaps}
-      viewState={viewState}
-      themeOverrides={Variables}
-    />
+  flushSync(() =>
+    root.render(
+      <UI
+        terria={terria}
+        allBaseMaps={allBaseMaps}
+        viewState={viewState}
+        themeOverrides={Variables}
+      />
+    )
   );
 }