Environment

• Elixir version (elixir -v): 1.18.3
• Phoenix version (mix deps): 1.8.0
• Phoenix LiveView version (mix deps): 1.1.3
• Operating system: MacOS
• Browsers you attempted to reproduce this bug on (the more the merrier): Chrome/Safari
• Does the problem persist after removing "assets/node_modules" and trying again? Yes

Actual behavior

We've been having some issues with a complicated scenario in our main code base. I've managed to reproduce it in a simpler way in a smaller repo.

In summary...

we have a single live view with a multiselect (page.ex). We render a live_component for each item in the multiselect (item.ex). Each of these renders a live_component (item_header.ex) which async assigns a fixed value and has a loading state.

when we render the page, the loading state shows very briefly, followed by the loaded state... then shortly after (im using a process.sleep at the moment to make this more visible) it reverts to a loading state and remains stuck there

at the same time there are 2 other contributing factors, a JS hook that on mount just sends a message to the liveview, and another assign_async in item.ex that is never used

note that this is not reproducible in liveview 0.20!

Here's a video

and here's the minimal repro, just run mix phx.server
https://github.com/danturn/hook_bug_repro/tree/main

Expected behavior

Loading state should show before the assign async finishes, and once finished, the html should remain in the loaded state