In NextJS, you can use Suspense to load the data asynchronously and show a loading state.

<Suspense fallback={<JobSkeleton />}>
  <JobList query={query} location={location} />
</Suspense>

What’s very interesting is that:

1. The job page loads instantly since no data is being fetched.
2. The job data loads asynchronously from the database.
3. If you View Source or curl the page, the job data is there, ready for SEO.

I’m wondering, how could you accomplish the same in Liveview? Is it possible?

Here’s the code I’ve tried so far experimenting with this:

defmodule GamedropWeb.TrendingLive do
  use GamedropWeb, :live_view
  alias Gamedrop.Games

  @impl true
  def mount(_params, _session, socket) do
    if connected?(socket) do
      # For browser requests, start with loading state and load data asynchronously
      socket = assign(socket, loading: true, trending_games: [])
      send(self(), :load_trending_games)
      {:ok, socket}
    else
      # For SEO/curl requests, load data synchronously
      trending = Games.trending_games()
      {:ok, assign(socket, loading: false, trending_games: trending)}
    end
  end

  @impl true
  def handle_info(:load_trending_games, socket) do
    Process.sleep(1000)
    trending = Games.trending_games()
    {:noreply, assign(socket, trending_games: trending, loading: false)}
  end
end

This defeats the point of what I’m trying to accomplish because the curl to this URL will load the trending games right away. And in browser, when someone navigates to this liveview, it’ll load the data before transitioning to the url.

Appreciate any tips!