woohaaha
Make LiveView behave like a Single Page App, examples?
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 
Thank you
Most Liked
hubertlepicki
I don’t have an example handy for you but you basically do that this way:
- On the first mount, when connected? returns false, you don’t load the data. You render the “loading…” page
- 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.
FlyingNoodle
“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.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"