Add loading spinner to HomeLive

Add a loading spinner to HomeLive so that it does not attempt to load
two images and take a long time to connect the LiveView.

This will prevent the static render from loading an image and blocking
the LiveView connection until said image is loaded.

Once the LiveView is connected an img will be rendered on the screen.

Locally this was prone to a flash of unstyled content which I really
don't like but I am curious if that's not a thing when deployed.

Author: SamuelWillis

Diff for: lib/samuel_willis_web/live/HomeLive.ex

@@ -13,10 +13,36 @@ defmodule SamuelWillisWeb.HomeLive do
     %{name: "house.jpg", alt: "Image of a house"}
   ]
 
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, :image, Enum.random(@images))}
+  end
+
   def render(assigns) do
     ~H"""
-    <div class="flex flex-col items-center sm:grid sm:grid-cols-2 sm:gap-6 space-y-6">
-      <.home_image />
+    <div class="flex-1 flex flex-col items-center sm:grid sm:grid-cols-2 sm:gap-6 space-y-6">
+      <img
+        src={~p"/images/#{@image.name}"}
+        class="hidden w-96"
+        alt={@image.alt}
+        phx-connected={JS.show()}
+      />
+      <div class="w-96 h-full flex justify-center items-center" phx-connected={JS.hide()}>
+        <svg
+          class="animate-spin h-5 w-5"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+          </circle>
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          >
+          </path>
+        </svg>
+      </div>
 
       <nav class="flex flex-col items-center">
         <ul class="space-y-4 text-xl font-bold">
@@ -56,11 +82,10 @@ defmodule SamuelWillisWeb.HomeLive do
     """
   end
 
-  def home_image(assigns) do
-    assigns = assign(assigns, :image, Enum.random(@images))
+  attr :image, :map, required: true
 
+  def home_image(assigns) do
     ~H"""
-    <img src={~p"/images/#{@image.name}"} class="w-96" alt={@image.alt} />
     """
   end
 end