Implement PDF loader

app/javascript/application.js

@@ -3,6 +3,7 @@ import { encodeMethodIntoRequestBody } from '@hotwired/turbo-rails/app/javascrip
 
 import { createApp, reactive } from 'vue'
 import TemplateBuilder from './template_builder/builder'
+import './pdf_loader'
 
 import ToggleVisible from './elements/toggle_visible'
 import DisableHidden from './elements/disable_hidden'

app/javascript/application.scss

@@ -129,3 +129,44 @@ button[disabled] .enabled {
   outline-offset: 3px;
   outline-color: hsl(var(--bc) / 0.2);
 }
+
+.my-display {
+  display: none;
+}
+
+#loader {
+  background: rgba(0, 7, 14, 0.7);
+  text-align: center;
+  position: absolute;
+  top: 0em;
+  left: 0em;
+  padding: 20% 0px;
+  height: 100vh;
+  width: 100vw;
+  text-align: -webkit-center;
+}
+
+.loader-animation {
+  width: 50px;
+  height: 50px;
+  border: 4px solid #fff;
+  border-top: 4px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.text-load {
+  color: #fff;
+  font-size: large;
+}

app/javascript/pdf_loader.js

@@ -0,0 +1,15 @@
+document.addEventListener("DOMContentLoaded", function () {
+  function showLoading() {
+    document.getElementById("loader").style.display = "block";
+  }
+  var editTemplateLink = document.getElementById("edit-template-link");
+  editTemplateLink.addEventListener("click", function (event) {
+    event.preventDefault();
+    showLoading();
+
+    var template = this.getAttribute("data-template");
+    setTimeout(function () {
+      window.location.href = template;
+    }, 3000);
+  });
+});

app/views/templates/_title.html.erb

@@ -33,7 +33,7 @@
       <% end %>
     <% end %>
     <% if !template.deleted_at? && can?(:update, template) %>
-      <%= link_to edit_template_path(template), class: 'btn btn-outline btn-sm', id: 'edit-template-link' do %>
+      <%= link_to edit_template_path(template), class: 'btn btn-outline btn-sm', id: 'edit-template-link', data: {template: edit_template_path(@template)} do %>
         <span class="flex items-center justify-center space-x-2">
           <%= svg_icon('pencil', class: 'w-6 h-6') %>
           <span>Edit</span>
@@ -41,26 +41,9 @@
       <% end %>
     <% end %>
 
-    <div id="loading-spinner" style="display: none;">
-    Loading...
-  </div>
 
     <% if template.deleted_at? && can?(:create, template) %>
       <%= button_to button_title(title: 'Restore', disabled_with: 'Restoring', icon: svg_icon('rotate', class: 'w-6 h-6')), template_restore_index_path(template), class: 'btn btn-outline btn-sm' %>
     <% end %>
   </div>
 </div>
-
-<script>
-    function showLoading() {
-      document.getElementById('edit-template-link').style.display = 'none';
-      document.getElementById('loading-spinner').style.display = 'block';
-    }
-    document.getElementById('edit-template-link').addEventListener('click', function(event) {
-      event.preventDefault();
-      showLoading();
-      setTimeout(function() {
-        window.location.href = '<%= edit_template_path(template) %>';
-      }, 5000); 
-    });
-</script>

app/views/templates/show.html.erb

@@ -98,3 +98,8 @@
     </div>
   </div>
 <% end %>
+
+<div class="my-display" id="loader">
+  <div class="loader-animation"></div>
+  <div class="text-load">Loading...</div>
+</div>