[EuiResizableContainer] Initialize after DOM is ready

CHANGELOG.md

@@ -7,6 +7,7 @@
 **Bug fixes**
 
 - Fixed heights of `append` and `prepend` in `EuiComboBox` ([#4410](https://github.com/elastic/eui/pull/4410))
+- Fixed `EuiResizableContainer` initialization timing based on DOM readiness ([#4447](https://github.com/elastic/eui/pull/4447))
 
 ## [`31.3.0`](https://github.com/elastic/eui/tree/v31.3.0)
 

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>
   );