[useResizeObserver] Fix initial width and height being 0 in docs example

[Juneezee]

Summary

Fixes #7458.

Old PR description

In the useResizeObserver hook, we set the initial state of width and height as 0:

eui/src/components/observer/resize_observer/resize_observer.tsx

Line 73 in 239dc72

const [size, _setSize] = useState({ width: 0, height: 0 });

This is okay because we have a useEffect that will trigger a re-render when the container has changed:

eui/src/components/observer/resize_observer/resize_observer.tsx

Lines 95 to 120 in 239dc72

	useEffect(() => {
	if (container != null) {
	// ResizeObserver's first call to the observation callback is scheduled in the future
	// so find the container's initial dimensions now
	const boundingRect = container.getBoundingClientRect();
	setSize({
	width: boundingRect.width,
	height: boundingRect.height,
	});
	const observer = makeResizeObserver(container, () => {
	// `entry.contentRect` provides incomplete `height` and `width` data.
	// Use `getBoundingClientRect` to account for padding and border.
	// https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly
	const { height, width } = container.getBoundingClientRect();
	setSize({
	width,
	height,
	});
	});
	return () => observer && observer.disconnect();
	} else {
	setSize({ width: 0, height: 0 });
	}
	}, [container, setSize]);

We are calling our customized setSize in the useEffect. This custom setSize only calls the _setSize (from useState) when the new and old dimension differs.

eui/src/components/observer/resize_observer/resize_observer.tsx

Lines 78 to 93 in 239dc72

	const setSize = useCallback(
	(dimensions: { width: number; height: number }) => {
	const doesWidthMatter = dimension !== 'height';
	const doesHeightMatter = dimension !== 'width';
	if (
	(doesWidthMatter &&
	_currentDimensions.current.width !== dimensions.width) ||
	(doesHeightMatter &&
	_currentDimensions.current.height !== dimensions.height)
	) {
	_currentDimensions.current = dimensions;
	_setSize(dimensions);
	}
	},
	[dimension]
	);

To fix the bug, we simply set the initial width and height as undefined. Then, the else block in useEffect will "initialise" the width and height to 0. Now setSize detects that the old and new dimension differs (undefined to 0), so it will update the state and trigger a re-render.

eui/src/components/observer/resize_observer/resize_observer.tsx

Lines 117 to 119 in 239dc72

	} else {
	setSize({ width: 0, height: 0 });
	}

As a result, useResizeObserver will now return the initial dimension correctly.

This solution is inspired by: https://github.com/ZeeCoder/use-resize-observer/blob/465fbc11c92e1b97a1dcb526b44ce4d889956951/src/index.ts#L62-L68

QA

1. Go to Resize observer page
2. useResizeObserver now returns the same height and width as the EuiResizeObserver example

2024-02-07.23-51-46.mp4

General checklist

• Browser QA
  • Checked in mobile
  • Checked in Chrome, Firefox, Safari, Edge (I'm using a Linux machine)
• Code quality checklist
  • Added or updated jest and cypress tests The test is marked as skip

    eui/src/components/observer/resize_observer/resize_observer.test.tsx

    Line 25 in 239dc72

    describe.skip('testResizeObservers', () => {

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

[Juneezee]

This removes the $ typo

[cee-chen]

Hey @Juneezee! Thanks so much for this PR, it's really helped me realize what the underlying problem is.

Rather than fixing the useResizeObserver source code, I think we need to change the documentation example to tell consumers to use useState instead of useRef. The issue is that our useEffect isn't registering a container update (due to the fact that it's a ref) when it should. Changing

eui/src-docs/src/views/resize_observer/resize_observer_hook.js

Lines 27 to 28 in 09e6dd7

	const resizeRef = useRef();
	const dimensions = useResizeObserver(resizeRef.current);

to

const [resizeRef, setResizeRef] = useState();
const dimensions = useResizeObserver(resizeRef);

// ...

<div className="eui-displayInlineBlock" ref={setResizeRef}>

Also solves the issue of returning the correct width/height on mount without requiring any source code change. I think I'd prefer this approach (having consumers solve it) rather than us adding an extra rerender. This allows consumers to opt in to useRef instead if they prefer to only receive size dimensions on update rather than on mount.

What do you think?

[Juneezee]

@cee-chen Thanks for reviewing this PR! Your suggestion looks great to me. I have updated the PR, please take a look again. Thanks 😄 !

[cee-chen]

buildkite test this

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7518/
• Storybook: https://eui.elastic.co/pr_7518/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 384ee9f

[cee-chen]

Thanks again @Juneezee, you're amazing!! 🚀