Legend Flickering with Svelte

[CalebSchwind]

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]

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.

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).

[Grant_DeCoux]

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

[Sage_Wall]

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.

[Grant_DeCoux]

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

[Sage_Wall]

@CalebSchwind @Grant_DeCoux 

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

[CalebSchwind]

Awesome! Thank you!