load champion detail asynchronously

apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/summoner_spells.ex

@@ -5,7 +5,7 @@ defmodule LolAnalyticsWeb.ChampionComponents.SummonerSpells do
   def summoner_spells(assigns) do
     ~H"""
     <div class="flex flex-wrap flex-wrap gap-4">
-      <%= for spell <- assigns.spells.summoner_spells do %>
+      <%= for spell <- assigns.spells do %>
         <div class="has-tooltip">
           <div clas="flex flex-col gap-1">
             <img src={spell.image} />

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/show.ex

@@ -4,6 +4,7 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
   import LolAnalyticsWeb.ChampionComponents.SummonerSpells
   import LolAnalyticsWeb.ChampionComponents.ChampionAvatar
   import LolAnalyticsWeb.ChampionComponents.Items
+  import LolAnalyticsWeb.Loader
 
   alias LolAnalyticsWeb.ChampionComponents.SummonerSpells.ShowMapper
 
@@ -18,21 +19,32 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
      socket
      |> assign(:page_title, page_title(socket.assigns.live_action))
      |> assign(:champion, load_champion_info(id))
-     |> assign(:summoner_spells, %{
+     |> load_summoner_spells(id, team_position)
-       summoner_spells: load_summoner_spells(id, team_position)
-     })
      |> load_items(id, team_position, patch)}
   end
 
-  defp load_summoner_spells(champion_id, team_position) do
+  defp load_summoner_spells(socket, champion_id, team_position) do
+    socket
+    |> assign(:summoner_spells, %{status: :loading})
+    |> start_async(
+      :get_summoners,
+      fn ->
         LolAnalytics.Facts.ChampionPickedSummonerSpell.Repo.get_champion_picked_summoners(
           champion_id,
           team_position
         )
         |> ShowMapper.map_spells()
       end
+    )
+  end
 
   defp load_items(socket, champion_id, team_position, patch) do
+    socket
+    |> assign(:items, %{status: :loading})
+    |> assign(:boots, %{status: :loading})
+    |> start_async(
+      :get_items,
+      fn ->
         items =
           LolAnalytics.Facts.ChampionPickedItem.Repo.get_champion_picked_items(
             champion_id,
@@ -40,12 +52,39 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
             patch
           )
 
-    all_items_mapped = items |> ShowMapper.map_items() |> Enum.take(30)
+        popular_items = items |> ShowMapper.map_items() |> Enum.take(30)
+
         boots = items |> ShowMapper.extract_boots()
 
+        %{boots: boots, popular: popular_items}
+      end
+    )
+  end
+
+  def handle_async(:get_items, {:ok, %{popular: popular, boots: boots}} = result, socket) do
+    IO.inspect(result)
+
+    socket =
       socket
-    |> assign(:items, all_items_mapped)
+      |> assign(:items, %{
-    |> assign(:boots, boots)
+        status: :data,
+        data: %{
+          popular: popular,
+          boots: boots
+        }
+      })
+
+    {:noreply, socket}
+  end
+
+  def handle_async(:get_summoners, {:ok, summoner_spells}, socket) do
+    socket =
+      assign(socket, :summoner_spells, %{
+        status: :data,
+        data: summoner_spells
+      })
+
+    {:noreply, socket}
   end
 
   defp load_champion_info(champion_id) do
@@ -55,4 +94,55 @@ defmodule LoLAnalyticsWeb.ChampionLive.Show do
 
   defp page_title(:show), do: "Show Champion"
   defp page_title(:edit), do: "Edit Champion"
+
+  def render_summoner_spells(assigns) do
+  end
+
+  def render_items(assigns) do
+    case assigns.items do
+      %{status: :loading} ->
+        ~H"""
+        <.loader />
+        """
+
+      %{status: :data, data: data} ->
+        ~H"""
+        <%= if Enum.count(data.boots) > 0 do %>
+          <h2 class="text-2xl">Items</h2>
+
+          <h2 class="text-xl">Boots</h2>
+
+          <div class="my-2" />
+
+          <.items items={data.boots} />
+
+          <div class="my-4" />
+        <% end %>
+
+        <h2 class="text-xl">Popular items</h2>
+
+        <div class="my-2" />
+
+        <.items items={data.popular} />
+        """
+    end
+  end
+
+  def render_summoners(assigns) do
+    case assigns.summoner_pells do
+      %{status: :loading} ->
+        ~H"""
+        <.loader />
+        """
+
+      %{status: :data, data: data} ->
+        ~H"""
+        <h2 class="text-2xl">Summoner spells</h2>
+
+        <div class="my-2" />
+
+        <.summoner_spells spells={data} />
+        """
+    end
+  end
 end

apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/show.html.heex

@@ -11,26 +11,8 @@
 
 <div class="my-4" />
 
-<h2 class="text-2xl">Summoner spells</h2>
+<.render_summoners summoner_pells={@summoner_spells} />
-
-<div class="my-2" />
-
-<.summoner_spells spells={@summoner_spells} />
 
 <div class="my-4" />
 
-<h2 class="text-2xl">Items</h2>
+<.render_items items={@items} />
-
-<h2 class="text-xl">Boots</h2>
-
-<div class="my-2" />
-
-<.items items={@boots} />
-
-<div class="my-4" />
-
-<h2 class="text-xl">Popular items</h2>
-
-<div class="my-2" />
-
-<.items items={@items} />