Add loading snipper per page

app/javascript/packs/application.js

@@ -36,6 +36,8 @@ $(document).on("ready turbolinks:load", function () {
     $('#sidenav').toggleClass('active');
   });
 
+  $(".spinner-border").hide();
+  
   var default_config = { altFormat: "m/d/Y", altInput: true, enableTime: false, dateFormat: "Y-m-d", isMobile: true };
   $('.default-flatpickr').flatpickr(default_config);
 

app/views/layouts/application.html.erb

@@ -54,10 +54,17 @@
     <%= render(DoctrinesOffcanvasComponent.new(current_user: current_user, opts: { is_render: true })) %>
 
     <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end align-items-center' %>">
+      
       <div class="<%= current_user.present? ? 'd-none' : 'col-sm-7 login-logo' %>">
         <%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>
       </div>
+      <div class="text-center" style="margin-top: 100px;position: absolute;">
+        <div class="spinner-border loading" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
       <div class="<%= current_user.present? ? 'col py-3 main-content-body mt-5' : 'col-sm-5 login-body-box' %>">
+     
       <div class="content-body">
           <%= yield %>
         </div>