[Bug] Automatic icon layer shows as dot

[leverglowh]

Describe the bug When kepler recognises an icon layer (icon column in csv) it shows a dot instead. On mouse hover the correct icon flashes for a split second but does not stay. The same bug has been observed both when importing a csv dataset and a previously exported json through the "Add Data" modal. Restoring a dataset+layer config programmatically with addDataToMap action triggers the same bug as well. Edit: the bug is not present in https://kepler-preview.foursquare.com!

To Reproduce Steps to reproduce the behavior: Minimal dataset example:

latitude,longitude,icon
40,20,bug

1. Go to demo website
2. Import the above csv
3. Remove or hide the point layer we don't need
4. See that Kepler has created an icon layer, with the correct column reference, but it shows as dot
5. Hover on the dot (may be useful to increase the radius otherwise it's tiny) and see that the correct icon shows for a split second

Expected behavior The correct icon should show instead of a dot.

Screenshots This video shows the pin icon flashing when hovering over the dot.

https://github.com/user-attachments/assets/e685d318-6d2c-47b2-b1e7-08063838e901

Desktop (please complete the following information):

• OS: both macOS and Windows
• Browser: works fine on safari on macOS, but not on chrome or firefox (macOS or Windows)
• Version: 3.2.3

Additional context Dataset size is not a factor, I've been able to reproduce this with much larger dataset with many more columns and rows. I reproduced it launching the demo app with all the reducer logs as well, but I found no error in console (in case it was a fallback on the icon, but it wasn't?).

[dguittet]

I am also having this issue on the Chrome browser on a Mac computer. The icons work using Safari however. For me, the "id" column is required for the icons to show up

[leverglowh]

I can confirm that it works on safari but it doesn't on chrome or firefox. I tried adding an id column, but nothing changed :(

[slw546]

The cause is that the IconLayer fetches the default svgIcons via an async Window.fetch call, which isn't resolved by the time the layer is rendered. Set a breakpoint on the fetch here and you'll see the icons work as the breakpoint will allow the fetch to resolve before the rendering happens

It's not clear to me how to fix this since the mergeLayers call doesn't tell the merger-handler to await it, equally the svgIcons prop isn't passed from vis-state-merger when constructing IconLayer so it's also not possible to pre-load the icons yourself and pass them in

Also the relevant #3204, #3062 couldn't reproduce this probably because the fetches resolved in time; this is reproducible down to 3.1.10 at least.

[leverglowh]

I can confirm that version 3.2.4 does fix this