Use <.async_result> component

Removes need for custom conditional logic, and covers all needed states.

lib/music_library_web/live/artist_live/show.ex

@@ -50,15 +50,6 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
     }
   end
 
-  defp bio_available?(artist_info_result) do
-    artist_info_result.ok? && artist_info_result.result && artist_info_result.result.bio !== ""
-  end
-
-  defp played?(artist_info_result) do
-    artist_info_result.ok? && artist_info_result.result &&
-      artist_info_result.result.play_count > 0
-  end
-
   # Bios start with text, then a link to read more on Last.fm, followed by a license text.
   # We split the bio at the read more link in order to render the license separately.
   @last_fm_link_regex ~r/<a.*Read more on Last\.fm<\/a>\.\s*/

lib/music_library_web/live/artist_live/show.html.heex

@@ -1,35 +1,60 @@
 <div class="mt-4 px-4 sm:px-6 lg:px-8">
   <h1 class="flex items-end mt-1 font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
     {@artist.name}
-    <span :if={played?(@artist_info)}>
+    <.async_result :let={artist_info} assign={@artist_info}>
-      <span class="sr-only">
+      <:loading>
-        {gettext("Number of scrobbles")}
+        <div class="ml-2">
+          <span class="sr-only">{gettext("Loading play count")}</span>
+          <.icon
+            name="hero-arrow-path"
+            class="-mt-1 h-5 w-5 animate-spin"
+            aria-hidden="true"
+            data-slot="icon"
+          />
+        </div>
+      </:loading>
+      <:failed :let={_failure}>
+        <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
+          {gettext("There was an error loading the play count")}
+        </div>
+      </:failed>
+      <span :if={artist_info.play_count > 0}>
+        <span class="sr-only">
+          {gettext("Number of scrobbles")}
+        </span>
+        <span class={[
+          "rounded-full ml-2",
+          "px-2 py-1 text-xs font-medium",
+          "ring-1 ring-inset",
+          "bg-gray-50 dark:bg-gray-400/10",
+          "text-gray-600 dark:text-gray-500",
+          "ring-gray-500/10 dark:ring-gray-400/20"
+        ]}>
+          {artist_info.play_count}
+        </span>
       </span>
-      <span class={[
+    </.async_result>
-        "rounded-full ml-2",
-        "px-2 py-1 text-xs font-medium",
-        "ring-1 ring-inset",
-        "bg-gray-50 dark:bg-gray-400/10",
-        "text-gray-600 dark:text-gray-500",
-        "ring-gray-500/10 dark:ring-gray-400/20"
-      ]}>
-        {@artist_info.result.play_count}
-      </span>
-    </span>
   </h1>
-  <details
+
-    :if={bio_available?(@artist_info)}
+  <.async_result :let={artist_info} assign={@artist_info}>
-    class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
+    <:loading>
-  >
+      <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-    <summary class="text-sm mb-4">{gettext("Biography")}</summary>
+        {gettext("Loading biography")}
-    {render_bio(@artist_info.result.bio)}
+      </div>
-  </details>
+    </:loading>
-  <div
+    <:failed :let={_failure}>
-    :if={!bio_available?(@artist_info)}
+      <div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
-    class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
+        {gettext("There was an error loading the biography")}
-  >
+      </div>
-    {gettext("Biography not available")}
+    </:failed>
-  </div>
+    <details
+      :if={artist_info.bio !== ""}
+      class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400"
+    >
+      <summary class="text-sm mb-4">{gettext("Biography")}</summary>
+      {render_bio(@artist_info.result.bio)}
+    </details>
+  </.async_result>
 
   <div :if={@artist_records.collection !== []} class="mt-4">
     <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">

priv/gettext/default.pot

@@ -51,7 +51,7 @@ msgid "Choose a value"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:13
-#: lib/music_library_web/live/artist_live/show.html.heex:36
+#: lib/music_library_web/live/artist_live/show.html.heex:61
 #: lib/music_library_web/live/collection_live/index.ex:77
 #: lib/music_library_web/live/collection_live/show.ex:102
 #: lib/music_library_web/live/collection_live/show.ex:119
@@ -328,7 +328,7 @@ msgid "Welcome to your Music Library"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:19
-#: lib/music_library_web/live/artist_live/show.html.heex:74
+#: lib/music_library_web/live/artist_live/show.html.heex:99
 #: lib/music_library_web/live/wishlist_live/index.ex:75
 #: lib/music_library_web/live/wishlist_live/show.ex:102
 #, elixir-autogen, elixir-format
@@ -477,23 +477,38 @@ msgstr ""
 msgid "Dev dashboard"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:31
+#: lib/music_library_web/live/artist_live/show.html.heex:79
-#, elixir-autogen, elixir-format
+#: lib/music_library_web/live/artist_live/show.html.heex:117
-msgid "Biography not available"
-msgstr ""
-
-#: lib/music_library_web/live/artist_live/show.html.heex:54
-#: lib/music_library_web/live/artist_live/show.html.heex:92
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:6
+#: lib/music_library_web/live/artist_live/show.html.heex:23
 #, elixir-autogen, elixir-format
 msgid "Number of scrobbles"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:24
+#: lib/music_library_web/live/artist_live/show.html.heex:54
 #, elixir-autogen, elixir-format
 msgid "Biography"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:42
+#, elixir-autogen, elixir-format
+msgid "Loading biography"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:7
+#, elixir-autogen, elixir-format
+msgid "Loading play count"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:47
+#, elixir-autogen, elixir-format
+msgid "There was an error loading the biography"
+msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:18
+#, elixir-autogen, elixir-format
+msgid "There was an error loading the play count"
+msgstr ""