[BUG] Shimmer is being cut after resize window WEB

[PcolBP]

Hi. Thanks for plugin.

Shimmer.fromColors creates white space on the right side.
It never happened before. Now it does after migrating flutter to 3.3.0 and later.

Bug occurs on Flutter 3.3.0 & 3.3.2

Chrome setup

Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125

Removing Shimmer.fromColors resolve problem.

Image of skeletons with Shimmer.fromColors:

Image of skeletons without Shimmer.fromColors:

Flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.0, on macOS 12.6 21G115 darwin-arm (Rosetta), locale pl-PL)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.66.2)
[✓] VS Code (version 1.66.2)
[✓] Connected device (4 available)
[✓] HTTP Host Availability

• No issues found!

[PcolBP]

Found out that inserting Shimmer.fromColors in AnimatedSwitcher and switching fast between shimmer and correct child creates that container - looks like shimmer can't handle fast switching?

EDIT: Also the bigger screen resolution the container is bigger. It doesn't appear on low res screens.

EDIT2: Problem occurs also when we will refresh page and increase window size. Than container appears - after refreshing again on increased window problem dissapears until we will increase size again -.-"

EDIT3: Forgot to say that its HTML engine.

Repro:

TwSkeletonWrapper

class TwSkeletonWrapper extends StatelessWidget {
  const TwSkeletonWrapper({required this.child, Key? key}) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {

    return Shimmer.fromColors(
      key: ValueKey(child.hashCode),
      baseColor: Colors.black, // Colros simplified for testing
      highlightColor: Colors.white,
      child: child,
    );
  }
}

And wrap TwSkeletonWrapper inside:

TwSkeleton

class TwSkeleton extends StatelessWidget {
  const TwSkeleton({
    required this.skeleton,
    required this.loading,
    required this.child,
    Key? key,
  }) : super(key: key);

  final Widget skeleton;
  final Widget child;
  final bool loading;

  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
      duration: loading ? const Duration(milliseconds: 650) : Duration.zero,
      reverseDuration:
          loading ? const Duration(milliseconds: 10) : Duration.zero,
      child: loading ? skeleton : child,
    );
  }
}

When switching between childs than that weird container appears.

[PcolBP]

I've recorded sample of how to reproduce it. After entering page is enough to just increase size window to be able to see it.
https://user-images.githubusercontent.com/67896443/196207869-2beb0a30-6ff0-4c40-aa10-d0a3c494465f.mov

[LambGe]

+1