Make LiveView behave like a Single Page App, examples?

Phoenix Forum Questions / Help
,
1

I’m looking for examples where people took LiveView and made it behave like a Single Page Application. This would mean the page’s HTML loads instantly on every click, and the data follows later (but never blocks).

I haven’t really looked at LiveView in years but recently went through some of the API and I see there are a few async related functions added so it makes me wonder if someone might have a demo of all of the async in action :crossed_fingers:

Thank you

1 Like
2

I don’t have an example handy for you but you basically do that this way:

  1. On the first mount, when connected? returns false, you don’t load the data. You render the “loading…” page
  2. On the connected? true render you load up the data.

This is how I’ve implemented something similar as above in a project, unfortunately it’s not publictly available so cannot share.

1 Like
3

“HTML loads instantly” is by the very definition of Liveview being server side rendered, not possible. Yes, rendering HTML is very fast (sometimes single ms) but you do have to add the latency to the server as well.

Normally you don’t notice this latency but to be pedantic for the sake of being pedantic, liveview is not “instant HTML” like an SPA.

1 Like
4

https://hexdocs.pm/phoenix_live_view/syncing-changes.html

5

Loading data asynchronously:

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.html#module-async-operations

6

To me it seems that showing a “Loading…” state is relatively easy. Where I am struggling to see how one can build a full SPA with LiveView is that, by definition (or so it seems to me), a single LiveView is to be used to render relatively similar UI based on similar data; it’s not geared towards showing completely different pages with different layouts and loading completely different data. So you will need to create multiple LiveViews and then navigate between them. I don’t know - maybe that’s still an SPA from the point of view of the user?