[EuiResizableContainer] Initialize after DOM is ready

src-docs/src/views/resizable_container/resizable_container_basic.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { EuiText, EuiResizableContainer } from '../../../../src/components';
 import { fake } from 'faker';
 
@@ -10,23 +10,34 @@ const text = (
   </>
 );
 
-export default () => (
-  <EuiResizableContainer style={{ height: '200px' }}>
-    {(EuiResizablePanel, EuiResizableButton) => (
-      <>
-        <EuiResizablePanel initialSize={50} minSize="30%">
-          <EuiText>
-            <div>{text}</div>
-            <a href="">Hello world</a>
-          </EuiText>
-        </EuiResizablePanel>
+export default () => {
+  const dom = useRef();
+  const [styles, setStyles] = useState({ display: 'none' });
+  useEffect(() => {
+    if (!dom.current) return;
+    dom.current.innerHTML = 'YOLO';
+  });
+  useEffect(() => {
+    setTimeout(() => setStyles({ display: 'flex' }), 1000);
+  }, []);
+  return (
+    <EuiResizableContainer style={{ ...styles, height: '200px' }}>
+      {(EuiResizablePanel, EuiResizableButton) => (
+        <>
+          <EuiResizablePanel initialSize={50} minSize="30%">
+            <EuiText>
+              <div>{text}</div>
+              <a href="">Hello world</a>
+            </EuiText>
+          </EuiResizablePanel>
 
-        <EuiResizableButton />
+          <EuiResizableButton />
 
-        <EuiResizablePanel initialSize={50} minSize="200px">
-          <EuiText>{text}</EuiText>
-        </EuiResizablePanel>
-      </>
-    )}
-  </EuiResizableContainer>
-);
+          <EuiResizablePanel initialSize={50} minSize="200px">
+            <div ref={dom} />
+          </EuiResizablePanel>
+        </>
+      )}
+    </EuiResizableContainer>
+  );
+};

src/components/resizable_container/resizable_container.tsx

@@ -128,7 +128,9 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
   );
 
   useEffect(() => {
-    initialize();
+    if (containerSize.width > 0 && containerSize.height > 0) {
+      initialize();
+    }
   }, [initialize, containerSize]);
 
   const onMouseDown = useCallback(
@@ -273,7 +275,7 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
         onTouchMove={onMouseMove}
         onTouchEnd={onMouseUp}
         {...rest}>
-        {!!reducerState.containerSize && render()}
+        {render()}
       </div>
     </EuiResizableContainerContextProvider>
   );