Fix: Fixes incorrect marquee width calculations

[pravton]

Description

This PR fixes the width calculation issue we faced when children don't have a width on render.

For example, if the children use flex or the child elements don't have constrained widths, the marquee would throw an error. This happens when an image is loading during render and the parent element resolves to 0—the needed amount would be Infinity to fill the container, causing Invalid array length error when rendering the MarqueeItems.

Solution

I have added ResizeObserver to watch changes on the container and this would re-render the component with updated calculation which would typically solves this issue.

All modern browsers support ResizeObserver, but I've kept the resize event listener for legacy browser support. Let me know if you think ResizeObserver alone is sufficient—we can probably remove the resize event listener.

I've tested with flex children and images without specified widths—the marquee calculates the width correctly in all cases.

Resolves #163

Additional Notes

I've also updated the placeholder URLs from upsplash.io to placehold.co since the Unsplash URLs were resolving super slowly.

[marlonmarcello]

All modern browsers support ResizeObserver, but I've kept the resize event listener for legacy browser support. Let me know if you think ResizeObserver alone is sufficient—we can probably remove the resize event listener.

Let's remove that old one, ResizeObserver has been around for a while and supported in Safari since v13 even.
That said, let's make this a major bump though as we are essentially not supporting those really old browser versions anymore.

[marlonmarcello]

Actually, this repo is setup with changesets @pravton so please use that.
Simply run npm run changeset

[andrewrubin]

Code is looking great @pravton ! I agree with Marlon, let's use changeset to make this a major bump instead of minor (3.0.0)

[changeset-bot]

🦋 Changeset detected

Latest commit: 94cd684

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@wethegit/react-marquee	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[pravton]

Code is looking great @pravton ! I agree with Marlon, let's use changeset to make this a major bump instead of minor (3.0.0)

Thanks Andrew! Updated and used changeset for major version bump.

FYI: I have also rebased this branch since I was merging some Dependabot PRs.

[andrewrubin]

LGTM

[marlonmarcello]

Thanks for the changes @pravton

[pravton]

Thanks @marlonmarcello, committed your suggestion and need another ✅ when you get a chance!