Legend Flickering with Svelte

CalebSchwind · ‎07-18-2024

I'm using sveltekit and arcgis js api v4.30. The legend is flickering whenever a new layer is added (see gif below). This wasn't an issue in v4.28.

Any ideas on how to fix this?

Below is a repository with an example of the issue.

To test: clone that repo, run "npm install", run "npm run dev", open http://localhost:5173/ in your browser, click the "Add Layer" button several times to see the flicker.

https://github.com/cschwinderg/svelte-legend-flicker

Sage_Wall · ‎07-18-2024

Hi @CalebSchwind

Thanks for posting. I'm a SvelteKit fan too 😀. I'm not sure what's going on here. I noticed you were using a lot of async dynamic imports so my first thought was one of those might be holding things up but I doubt that's it after thinking more about it. I wasn't able to repro in a vanilla JS codepen. https://codepen.io/sagewall/pen/BagjEvV There is a little shimmy as the first layer populates but the whole thing doesn't flicker like happens in SvelteKit. I'll try and look at it closer and clone your repo tomorrow.

CalebSchwind

Thank you for looking into this. I have a react app that I updated to 4.30 and it doesn't have the issue.

Sage_Wall

Thanks @CalebSchwind , Good to know about the react app. So far I've been able to repro in SvelteKit, Svelte, Vite TS and even using ESM modules via CDN. I've also noticed, without any serious testing, this may only affect PCs. When I tried opening up this ESM codepen I didn't see the flickering on a BrowserStack mac but do on my PC laptop. It's really strange but I've created an issue and we'll continue debugging. I don't think there will be anything you'll be able to do app side to prevent this. I'd be interested to find out if you or other's see the flickering in this ESM codepen.

https://codepen.io/sagewall/pen/rNEeOKK

It looks like the whole legend is being re-rendered when a layer is added.

(view in My Videos)

My personal observations are I see the flickering when using the ESM modules on PC (npm and cdn) but not when I use the AMD modules.

https://codepen.io/sagewall/pen/RwzaPMY

CalebSchwind

I see the flickering in the first codepen (ESM), but not in the second codepen (AMD modules).