adjusting edit page loader

app/javascript/application.js

@@ -3,7 +3,6 @@ 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/pdf_loader.js

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

app/views/templates/show.html.erb

@@ -102,4 +102,22 @@
 <div class="my-display" id="loader">
   <div class="loader-animation"></div>
   <div class="text-load">Loading...</div>
-</div>
+</div>
+
+<script>
+  function showLoading () {
+    document.getElementById('loader').style.display = 'block'
+  }
+  const editTemplateLink = document.getElementById('edit-template-link')
+  if (editTemplateLink) {
+    editTemplateLink.addEventListener('click', function (event) {
+      event.preventDefault()
+      showLoading()
+
+      const template = this.getAttribute('data-template')
+      setTimeout(function () {
+        window.location.href = template
+      }, 3000)
+    })
+  }
+</script>