From 63fd9370e0917747f73212b6e71cc8baad058947 Mon Sep 17 00:00:00 2001
From: cavis <ryancavis@gmail.com>
Date: Wed, 2 Aug 2023 08:51:52 -0600
Subject: [PATCH] CSS class for busy-turbo-frame loading indicators

---
 app/assets/stylesheets/shared/busy.scss       | 20 +++++++++++++++++++
 app/assets/stylesheets/shared/shared.scss     |  1 +
 .../podcast_planner/_form_draft.html.erb      | 18 ++++++++++++-----
 3 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 app/assets/stylesheets/shared/busy.scss

diff --git a/app/assets/stylesheets/shared/busy.scss b/app/assets/stylesheets/shared/busy.scss
new file mode 100644
index 000000000..83e29a33f
--- /dev/null
+++ b/app/assets/stylesheets/shared/busy.scss
@@ -0,0 +1,20 @@
+.prx-show-busy {
+  display: none !important;
+}
+.prx-visible-busy {
+  visibility: hidden !important;
+}
+turbo-frame[busy] {
+  .prx-show-busy {
+    display: initial !important;
+  }
+  .prx-hide-busy {
+    display: none !important;
+  }
+  .prx-visible-busy {
+    visibility: initial !important;
+  }
+  .prx-invisible-busy {
+    visibility: hidden !important;
+  }
+}
diff --git a/app/assets/stylesheets/shared/shared.scss b/app/assets/stylesheets/shared/shared.scss
index 327bc5a0c..af214195e 100644
--- a/app/assets/stylesheets/shared/shared.scss
+++ b/app/assets/stylesheets/shared/shared.scss
@@ -10,6 +10,7 @@
 // global layout
 @import "mixins";
 @import "reboot";
+@import "busy";
 @import "button";
 @import "card";
 @import "episode-card";
diff --git a/app/views/podcast_planner/_form_draft.html.erb b/app/views/podcast_planner/_form_draft.html.erb
index 4ddf60231..b1cf51268 100644
--- a/app/views/podcast_planner/_form_draft.html.erb
+++ b/app/views/podcast_planner/_form_draft.html.erb
@@ -23,12 +23,20 @@
           <%= t(".title.calendar") %>
         </h5>
 
-        <button type="submit" class="btn btn-primary d-inline" disabled data-planner-target="button" data-turbo="false">
-          <%= t(".label.create") %>
-          <span data-planner-target="count"><%= @planner.dates&.count.to_i %></span>
-          <span data-planner-target="label" data-singular="<%= t(".label.draft") %>" data-plural="<%= t(".label.draft").pluralize %>">
-            <%= t(".label.draft").pluralize(@planner.dates&.count.to_i) %>
+        <button type="submit" class="btn btn-primary position-relative" disabled data-planner-target="button" data-turbo="false">
+          <span class="prx-invisible-busy">
+            <%= t(".label.create") %>
+            <span data-planner-target="count"><%= @planner.dates&.count.to_i %></span>
+            <span data-planner-target="label" data-singular="<%= t(".label.draft") %>" data-plural="<%= t(".label.draft").pluralize %>">
+              <%= t(".label.draft").pluralize(@planner.dates&.count.to_i) %>
+            </span>
           </span>
+
+          <div class="prx-show-busy position-absolute top-0 start-0 w-100 h-100">
+            <div class="d-flex align-items-center justify-content-center h-100">
+              <span class="spinner-border" role="status" aria-hidden="true"></span>
+            </div>
+          </div>
         </button>
       </div>