fix: restore after the suspense

src/allotment.tsx

@@ -14,7 +14,6 @@ import useResizeObserver from "use-resize-observer";
 
 import styles from "./allotment.module.css";
 import { isIOS } from "./helpers/platform";
-import useIsomorphicLayoutEffect from "./helpers/use-isomorphic-layout-effect";
 import { LayoutService } from "./layout-service";
 import { PaneView } from "./pane-view";
 import { Orientation, setGlobalSashSize } from "./sash";
@@ -197,7 +196,7 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
       },
     }));
 
-    useIsomorphicLayoutEffect(() => {
+    useEffect(() => {
       let initializeSizes = true;
 
       if (
@@ -313,7 +312,7 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
     /**
      * Add, remove or update views as children change
      */
-    useIsomorphicLayoutEffect(() => {
+    useEffect(() => {
       if (dimensionsInitialized) {
         const keys = childrenArray.map((child) => child.key as string);
         const panes = [...previousKeys.current];

stories/basic.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from "@storybook/react";
 import { debounce } from "lodash";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import useResizeObserver from "use-resize-observer";
 
 import {
@@ -71,7 +71,7 @@ export const PersistSizes: Story<{ numViews: number; vertical: boolean }> = ({
         console.log("write_sizes", sizes);
         localStorage.setItem("sizes", JSON.stringify(sizes));
       }, 100),
-    []
+    [],
   );
 
   useEffect(() => {
@@ -528,3 +528,50 @@ export const MeasureSize: Story = () => {
   );
 };
 Nested.args = {};
+
+function useManualSuspense() {
+  const [suspend, setSuspend] = useState(false);
+
+  const triggerSuspense = (ms: number = 1000) => {
+    setSuspend(true);
+    setTimeout(() => setSuspend(false), ms);
+  };
+
+  if (suspend) {
+    throw new Promise(() => {});
+  }
+
+  return triggerSuspense;
+}
+
+const Wrapper = ({ children }: { children?: React.ReactNode }) => {
+  const triggerSuspense = useManualSuspense();
+
+  return (
+    <div>
+      <button
+        className={styles.button}
+        type="button"
+        onClick={() => triggerSuspense()}
+      >
+        Trigger Suspense
+      </button>
+      {children}
+    </div>
+  );
+};
+
+export const WithSuspense: Story = () => {
+  return (
+    <Suspense fallback={"loading..."}>
+      <Wrapper>
+        <div className={styles.container}>
+          <Allotment vertical>
+            <Content />
+            <Content />
+          </Allotment>
+        </div>
+      </Wrapper>
+    </Suspense>
+  );
+};