CSS class for busy-turbo-frame loading indicators

PRX · Aug 2, 2023 · 63fd937 · 63fd937
1 parent e4d1f02
commit 63fd937
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/app/assets/stylesheets/shared/busy.scss 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
@@ -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
@@ -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>