Loading workspace insights... Statistics interval
7 days30 daysLatest CI Pipeline Executions
69bdfb68 fix[widgets][Carousel]: ENG-11356 fix carousel slides shown on Desktop during initial load (#4641)
## Description
When a carousel is configured to show 3 cards on desktop, 2 on tablet
and 1 on phone, it always shows 1 card on the first page load on
desktop. Resizing the browser window and back would fix it, but a hard
refresh would reproduce it again.
**Root Cause:**
The carousel uses `react-slick` under the hood. `react-slick` starts
with an internal default of `slidesToShow: 1` and only figures out the
correct number after mounting, by registering CSS media query listeners
(via `enquire.js`). Since no explicit `slidesToShow` prop was being
passed to the slider, it always painted 1 card first before correcting
itself.
**Fix:**
On mount (`componentDidMount`), we now read `window.innerWidth` and
match it against the configured responsive breakpoints to compute the
correct `slidesToShow` for the current viewport. This value is passed
directly to the slider as a prop, so the correct card count is applied
as soon as the page becomes interactive.
_Screenshot_
https://www.loom.com/share/4925ee12bde34a78956742e9fe72936e
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> **Low Risk**
> Localized carousel UI behavior in the widgets package; no auth, data,
or API surface changes.
>
> **Overview**
> Fixes **desktop first paint** showing only one carousel card when
responsive settings call for more (e.g. 3 on desktop). `react-slick` was
left to default `slidesToShow: 1` until its media-query listeners ran
after mount.
>
> `CarouselComponent` now **derives `slidesToShow` from
`window.innerWidth` and the `responsive` breakpoints** (falling back to
`slickProps.slidesToShow`), stores it in state, and passes
**`slidesToShow` explicitly** into `Slider` so the first interactive
render matches the viewport. A **debounced `resize` listener** keeps
that value in sync; **prop changes** to `responsive` or
`slickProps.slidesToShow` trigger a recalc; **unmount** removes the
listener and cancels debounce.
>
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
9e6656526232204fa7c6dcbfce0664c34d2a7607. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY --> 3863561b fix[widgets][Carousel]: ENG-11356 fix carousel slides shown on Desktop during initial load (#4641)
## Description
When a carousel is configured to show 3 cards on desktop, 2 on tablet
and 1 on phone, it always shows 1 card on the first page load on
desktop. Resizing the browser window and back would fix it, but a hard
refresh would reproduce it again.
**Root Cause:**
The carousel uses `react-slick` under the hood. `react-slick` starts
with an internal default of `slidesToShow: 1` and only figures out the
correct number after mounting, by registering CSS media query listeners
(via `enquire.js`). Since no explicit `slidesToShow` prop was being
passed to the slider, it always painted 1 card first before correcting
itself.
**Fix:**
On mount (`componentDidMount`), we now read `window.innerWidth` and
match it against the configured responsive breakpoints to compute the
correct `slidesToShow` for the current viewport. This value is passed
directly to the slider as a prop, so the correct card count is applied
as soon as the page becomes interactive.
_Screenshot_
https://www.loom.com/share/4925ee12bde34a78956742e9fe72936e
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> **Low Risk**
> Localized carousel UI behavior in the widgets package; no auth, data,
or API surface changes.
>
> **Overview**
> Fixes **desktop first paint** showing only one carousel card when
responsive settings call for more (e.g. 3 on desktop). `react-slick` was
left to default `slidesToShow: 1` until its media-query listeners ran
after mount.
>
> `CarouselComponent` now **derives `slidesToShow` from
`window.innerWidth` and the `responsive` breakpoints** (falling back to
`slickProps.slidesToShow`), stores it in state, and passes
**`slidesToShow` explicitly** into `Slider` so the first interactive
render matches the viewport. A **debounced `resize` listener** keeps
that value in sync; **prop changes** to `responsive` or
`slickProps.slidesToShow` trigger a recalc; **unmount** removes the
listener and cancels debounce.
>
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
9e6656526232204fa7c6dcbfce0664c34d2a7607. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->