topic Re: Legend Flickering with Svelte in ArcGIS JavaScript Maps SDK Questions

Legend Flickering with Svelte

CalebSchwind — Thu, 18 Jul 2024 21:30:56 GMT

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

Re: Legend Flickering with Svelte

Sage_Wall — Thu, 18 Jul 2024 22:53:36 GMT

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.

Re: Legend Flickering with Svelte

CalebSchwind — Fri, 19 Jul 2024 14:11:53 GMT

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

Re: Legend Flickering with Svelte

Sage_Wall — Fri, 19 Jul 2024 16:37:41 GMT

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

Re: Legend Flickering with Svelte

CalebSchwind — Fri, 19 Jul 2024 18:38:10 GMT

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

Re: Legend Flickering with Svelte

Grant_DeCoux — Tue, 10 Sep 2024 19:43:37 GMT

Hello, this is blocking me from updating to the latest js api version. Will this be fixed in 4.31?

Re: Legend Flickering with Svelte

Sage_Wall — Tue, 10 Sep 2024 22:01:10 GMT

Hi @Grant_DeCoux ,

Unfortunately it's not likely to make the 4.31 release. We have had to prioritize other issues. Currently it's tagged for 4.32. This is a strange bug and only seems to affect ESM builds on PCs. The macs we've tested with seem unaffected, but we need to do more testing and debugging.

Re: Legend Flickering with Svelte

Grant_DeCoux — Wed, 11 Sep 2024 15:16:03 GMT

I see, thanks! I found the bug does not affect Safari. But does appear when using chrome on my Mac

Re: Legend Flickering with Svelte

Sage_Wall — Fri, 11 Oct 2024 13:43:44 GMT

@CalebSchwind @Grant_DeCoux

This was fixed and will be part of the 4.31 release 🙂

Re: Legend Flickering with Svelte

CalebSchwind — Fri, 11 Oct 2024 13:48:07 GMT

Awesome! Thank you!