[SSR] Lazy components get duplicated if their dependencies have changed during loading

[mattersj]

Describe the bug

The main idea here is that if you change the value (signal or reactive property, whatever is reactive) your lazy component is dependent on during its loading, then you'll end up with a duplicate. So if your lazy component takes 500ms to be loaded then changing the dependency within the first 500ms reproduces this bug.

Your Example Website or App

https://stackblitz.com/edit/solid-ssr-vite-jgwmez?file=src%2Froutes%2Findex.tsx

Steps to Reproduce the Bug or Issue

[Repro already has this covered, just follow the link above and check out the output]

0. This bugs can only be reproduced when using SSR.
1. Create a memo that returns lazy loaded component that depends on another signal or reactive variable.
2. Call your component using <Dynamic component={yourMemo()} /> and put it inside a fragment with some tag alongside your dynamic component:

<>
  <span /> // <-- Important!
  <Dynamic component={yourMemo()} />
</>

3. Change the dependency, e.g. in createEffect and see that your dynamic component gets duplicated.

Expected behavior

I expected no duplications since the component is being rendered only once.

Screenshots or Videos

No response

Platform

System:
OS: macOS 12.4
CPU: (10) arm64 Apple M1 Pro
Memory: 87.78 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
Browsers:
Chrome: 114.0.5735.106
Firefox: 113.0.2
Safari: 15.5
npmPackages:
solid: 1.7.7
solid-start: 0.2.26

Additional context

No response

[ryansolid]

Interesting. I'm not seeing duplication in the Stackblitz.

I see Component #1 then Loading... then Component #2 in all the examples in Chrome and Safari. Not that I doubt there is a potential issue here. I've never used lazy like that. I would have put lazy in the map rather than in the Memo if possible.

I may need a different reproduction.

[mattersj]

@ryansolid Yeah, sorry, for some reason a div inside fragment gets lost but it's necessary to reproduce this bug. I updated the repro, please take another look on it.
Here's a screenshot of what I see:

I would have put lazy in the map rather than in the Memo if possible.

Interesting, what approach would you recommend if that's not possible?

Let's say I want to dynamically load svg icons as a component and import them using import.meta.glob so that now I have a bunch of promises and I need to pick one of them based on some signal (e.g. name) and put it in the lazy.
I was initially thinking about something like in the repro (memo + lazy) but I'm wondering if there's a better approach or any recommendation from your perspective.

Thank you!