Fix 'ResizeObserver loop limit exceeded' error in MapLayers widget (#…

…3305)

* Replaced useResizeDerector by UseLayoutResizeObserver

* changelog

* fixed CSS typo

common/changes/@itwin/map-layers/geo-fix_ResizeObserver_2022-03-08-13-33.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/map-layers",
+      "comment": "Fix 'ResizeObserver loop limit exceeded' error in MapLayers widget",
+      "type": "none"
+    }
+  ],
+  "packageName": "@itwin/map-layers"
+}

extensions/map-layers/package.json

@@ -85,8 +85,7 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-resize-detector": "^6.7.6"
+    "react-beautiful-dnd": "^13.0.0"
   },
   "peerDependencies": {
     "@itwin/core-bentley": "workspace:*",
@@ -136,4 +135,4 @@
       "mochaFile=lib/test/junit_results.xml"
     ]
   }
-}
+}

extensions/map-layers/src/ui/widget/SubLayersTree.scss

@@ -61,4 +61,7 @@
 
 .map-manager-sublayer-tree-content {
   flex-grow: 1;
+  width: "100%";
+  height: "100%";
+  overflow: "hidden"
 }

extensions/map-layers/src/ui/widget/SubLayersTree.tsx

@@ -12,10 +12,9 @@ import {
 } from "@itwin/components-react";
 import { ImageMapLayerSettings, MapSubLayerProps, MapSubLayerSettings } from "@itwin/core-common";
 import { IModelApp, ScreenViewport } from "@itwin/core-frontend";
-import { CheckBoxState, ImageCheckBox, NodeCheckboxRenderProps, useDisposable, WebFontIcon } from "@itwin/core-react";
+import { CheckBoxState, ImageCheckBox, NodeCheckboxRenderProps, useDisposable, useLayoutResizeObserver, useRefState, WebFontIcon } from "@itwin/core-react";
 import { Input } from "@itwin/itwinui-react";
 import * as React from "react";
-import { useResizeDetector } from "react-resize-detector";
 import { StyleMapLayerSettings } from "../Interfaces";
 import { SubLayersDataProvider } from "./SubLayersDataProvider";
 import "./SubLayersTree.scss";
@@ -137,7 +136,8 @@ export function SubLayersTree(props: { mapLayer: StyleMapLayerSettings }) {
     setLayerFilterString(event.target.value);
   }, []);
 
-  const { width, height, ref } = useResizeDetector();
+  const [divRef, divElement] = useRefState<HTMLDivElement>();
+  const [width, height] = useLayoutResizeObserver(divElement ?? null);
 
   return <>
     <div className="map-manager-sublayer-tree">
@@ -159,7 +159,8 @@ export function SubLayersTree(props: { mapLayer: StyleMapLayerSettings }) {
           </button>,
         ]}
       </Toolbar>
-      <div ref={ref} className="map-manager-sublayer-tree-content">
+      {/* <div ref={ref} className="map-manager-sublayer-tree-content"> */}
+      <div ref={divRef} className="map-manager-sublayer-tree-content">
         {width && height ? <ControlledTree
           nodeLoader={nodeLoader}
           selectionMode={SelectionMode.None}