From 736cd3ab57270855f8419af47ddbc82906bac654 Mon Sep 17 00:00:00 2001
From: shibao <shibao@bubbletea.dev>
Date: Fri, 18 Feb 2022 17:43:08 -0500
Subject: [PATCH] add liveview loading and reconnection screen

---
 assets/css/app.scss                           | 18 +++++++++++++
 .../templates/layout/live.html.heex           | 26 +++++++++++++++++++
 2 files changed, 44 insertions(+)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 602ce989..0d33aa81 100644
--- a/assets/css/app.scss
+++ b/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;
diff --git a/lib/cannery_web/templates/layout/live.html.heex b/lib/cannery_web/templates/layout/live.html.heex
index 55f20ebb..68c6dfef 100644
--- a/lib/cannery_web/templates/layout/live.html.heex
+++ b/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>