[Bug] Poor performance on mobile web

[Andreigr0]

Screen record https://photos.app.goo.gl/y7fdonK3epG4swJp7

Steps to reproduce

1. Build example (I just changed item count from 6 to 200 on Loading List screen) for web using either html or canvaskit: flutter build web --web-renderer html or flutter build web --web-renderer canvaskit This could require to use example as a package itself
2. Go to build folder: cd build/web
3. Serve this folder: python -m http.server 8000
4. Connect to your computer from your phone, e.g. something like 192.168.1.156:8000
5. Go to Loading list
6. See how FPS drops significantly but this is quite light screen

P.S. Maybe it's an issue of Flutter itself

[denisviana]

The same here

[jayjah]

Actually I think this is caused by a minor controller listener, which doesn't get disposed correctly. As I see you have many shimmer widgets in your list so I think this may be related to the problem I mentioned.

See this pull request #51

@Andreigr0 @denisviana Please check if my pull request helps at these performance issues. You can use that branch by the following override in you pubspec.yaml file:

dependency_overrides:
  flutter_shimmer:
    git:
      url: https://github.com/jayjah/flutter_shimmer.git
      ref: master

[XExistence]

Has anyone found a work around for this issue?

[mityax]

I found the problem. It's caused by flutter's html renderer which is used by default on mobile browsers.

Building with flutter build web --web-renderer canvaskit fixes the issue by instructing flutter to use the canvaskit renderer on all devices.

Unfortunately, this increases download size on mobile devices by about 2 MB, but this trade-off was barely noticeable in my tests and is worth the improved performance in my eyes (performance improves overall, but most noticeably for this plugin).

@Andreigr0 @denisviana @XSiyabonga

---

@jayjahI tried your proposal as well before finding this, but (at least for me) it didn't change anything noticeable, I'm afraid.