brainlid
Phoenix Blog Post: Restore LiveView State on Startup
You are storing some Phoenix LiveView state in the browser. You want to retrieve that saved state as early as possible to improve the user experience.
The approach we used earlier waits for the LiveView to request the client to send the data. In your situation, you know you want the data, so why wait around to be asked for it? Can you have it automatically pushed from the client without being requested? Can you do it in a way that is reusable for other pages and other LiveViews and not just this one page?
This recipe improves the design and even makes it work for multiple LiveViews in the same application!
Most Liked
derek-zhou
Very nice. I always pass at least 2 pieces of info in params: the locale and the timezone of the client; there is no better way to pass them.
The params can be either an object or a function returning an object. The second way is the best as used in the article. because during the LV session you could change any of your stored value so they would need to be re-evaluated in run-time, this is why it need to be a function.
ani
Note that when the live view is mounted via a live_redirect (vs initial full page render), the element node passed to the params function will not have the full subtree, so node.querySelector("div[data-state-restore='true']") will return null and the restore data won’t be available in the connect params.
Popular in Blog Posts
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Develop your skills with books, videos, and courses.
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!"