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.

Also, this causes a _ton_ of screen jumping on mobile screens which I
really really don't like.
This is partially because the image renders above the links on mobile
screens which means that the text gets pushed down when the image
finally kicks in...

This SVG approach might need adjusting to use a placeholder image that
keeps the same width + height dimensions that the actual images do to
prevent these screen jumps.

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 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">
@@ -55,12 +81,4 @@ defmodule SamuelWillisWeb.HomeLive do
     </div>
     """
   end
-
-  def home_image(assigns) do
-    assigns = assign(assigns, :image, Enum.random(@images))
-
-    ~H"""
-    <img src={~p"/images/#{@image.name}"} class="w-96" alt={@image.alt} />
-    """
-  end
 end