add liveview loading and reconnection screen

assets/css/app.scss

@@ -16,6 +16,24 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
   scrollbar-color: rgba(161, 161, 170, var(--tw-bg-opacity)) white;
 }
 
+.fa-fade {
+  animation: pulse 1s ease-in-out 0s infinite alternate;
+}
+
+@keyframes pulse {
+  0% { scale: 0.95; opacity: 0.5; }
+  100% { scale: 1.0; opacity: 1; }
+}
+
+.phx-connected > #disconnect, #loading {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.phx-loading:not(.phx-error) > #loading, .phx-error > #disconnect {
+  opacity: 0.95 !important;
+}
+
 /* Alerts and form errors used by phx.new */
 .alert {
   padding: 15px;

lib/cannery_web/templates/layout/live.html.heex

@@ -26,3 +26,29 @@
     <%= @inner_content %>
   </div>
 </main>
+
+<div
+  id="loading"
+  class="absolute opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
+  flex flex-col justify-center items-center space-y-4
+  transition-opacity ease-in-out duration-500"
+>
+  <h1 class="title text-2xl title-primary-500">
+    <%= gettext("Loading...") %>
+  </h1>
+
+  <i class="fas fa-3x fa-spin fa-cog"></i>
+</div>
+
+<div
+  id="disconnect"
+  class="absolute opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
+  flex flex-col justify-center items-center space-y-4
+  transition-opacity ease-in-out duration-500"
+>
+  <h1 class="title text-2xl title-primary-500">
+    <%= gettext("Reconnecting...") %>
+  </h1>
+
+  <i class="fas fa-3x fa-fade fa-satellite-dish"></i>
+</div>