fix: scrollshadow chromatic diff issue

[blambillotte]

Overview

One source of flakey chromatic diffs trace back to the use of the ScrollShadows component where the bottom scroll "shadow" element isn't reliably drawn. This generally happens when more complex children components are rendered that may take multiple paints to render the full content. This common flaky example has a GridTable nested inside:

When recording how the browser actually paints the component, you can see the initial frames do not include the GridTable (in the 2nd "card" from the top) so the ScrollShadows component doesn't think a bottom shadow is needed.
Initial initial paint does not include the full table

Then on subsequent frames, the table fully renders

[stephenh]

Just curious, but why the setTimeout instead of invoking onResize immediately? Maybe worth adding to as an in-source comment? :-)

[blambillotte]

yeah I'm not loving the solution - this hack allows us to delay the execution until the current execution thread is completed by placing this callback into the async queue (but without additional delay) since we need the multiple paints to complete before actually trying to size.
A cleaner option perhaps is to just use a normal useEffect which should be called after render, but also not provide any dependencies so it's called after each render since the callback is cheap? 🤔 Doing more testing on that path...

[blambillotte]

ehhh didn't seem to work on the last chromatic build :(

[stephenh]

Fwiw my has been something in useSetupColumnSizes i.e. this guy:

  // Used to recalculate our columns sizes when columns change
  useEffect(
    () => {
      if (!calculateImmediately.current) {
        const width = resizeRef.current?.clientWidth;
        width && setTableAndColumnWidths(width);
      }
    },
    // TODO: validate this eslint-disable. It was automatically ignored as part of https://app.shortcut.com/homebound-team/story/40033/enable-react-hooks-exhaustive-deps-for-react-projects
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [columns, setTableAndColumnWidths],
  );

I also thought we had a "ruler" div in GridTable somewhere, but I'm not seeing it anymore/atm... 🤔