adding fixes for loader and pages

thedevdojo · Jun 6, 2024 · 1f7b4e3 · 1f7b4e3
1 parent fe31883
commit 1f7b4e3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -26,9 +26,18 @@ document.addEventListener("DOMContentLoaded", function() {
     renderSmoothAnchorLinks();
     window.dispatchEvent(new CustomEvent('set-route', { detail: { route: window.location.pathname } }));
     document.startViewTransition(() => updateTheDOMSomehow(data));
+
+    removeHTMXloadingStates();
 
 });
 
+removeHTMXloadingStates = function(){
+    const loadingElements = document.querySelectorAll('[data-loading]');
+    loadingElements.forEach(element => {
+        element.style.display = 'none';
+    });
+}
+
 window.onbeforeunload = function(){
     console.log('go');
   };

diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
@@ -41,7 +41,7 @@ Below are a few problems and solutions that this package aims to offer.
             <p x-on:click="showMore=!showMore" :class="{ '!text-green-500' : showMore, '!text-green-600' : !showMore }" class="!my-0 select-none cursor-pointer !px-5 !py-4 group text-base font-bold  flex items-center">
             <svg :class="{ 'rotate-90' : showMore }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 scale-[0.98] group-hover:scale-100 ease-out duration-300 -translate-x-1 text-green-400"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>
             <span>Solution: One Package to Rule Them All</span></p>
-            <p x-show="showMore" class="!my-0 p-5 pt-0 text-sm"> Consolidate your authentication into a single, streamlined solution for effortless updates and consistent security across all apps.</p>
+            <p x-show="showMore" class="!my-0 p-5 pt-0 text-sm">Use a single authentication solution for effortless updates and consistent security.</p>
         </div>
     </div>
 </div>

diff --git a/layouts/main.html b/layouts/main.html
@@ -191,6 +191,9 @@
 .prose h2{
   font-size:25px;
   font-weight:800;
+}
+[data-loading] {
+  display: none;
 }
     </style>
 
@@ -200,11 +203,12 @@
       }
     </style>
     <script src="https://unpkg.com/[email protected]"></script>
+    <script src="https://unpkg.com/[email protected]/dist/ext/loading-states.js"></script>
     <script src="https://unpkg.com/htmx.org/dist/ext/alpine-morph.js"></script>
 
     {tailwindcss}
 </head>
-<body class="bg-black">
+<body class="bg-black" hx-ext="loading-states">
 
 
     <div x-data="{ 
@@ -252,10 +256,13 @@
       "
       @close-left-sidebar.window="leftSidebar = false"
       x-init="route=window.location.pathname" 
-      @set-route.window="route=event.detail.route" id="site" x-cloak>
+      @set-route.window="route=event.detail.route" id="site" x-cloak data-loading-class-remove>
 
       <include src="header.html"></include>
-      <div id="site-content" class="">
+      <div class="flex fixed inset-0 justify-center items-center w-screen h-screen text-white bg-black z-[998] overflow-hidden" data-loading="flex" data-loading-delay="1000">
+        <svg class="w-5 h-5 text-white animate-spin md:mr-8" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>  
+      </div>
+      <div id="site-content" class="z-[997]">
         {slot}
       </div>
       <include src="footer.html"></include> 

diff --git a/pages/docs/[content].html b/pages/docs/[content].html
@@ -1,4 +1,4 @@
-<layout title="Docs" src="main.html">
+<layout title="{frontmatter.title}" src="main.html">
 
     <div  class="flex items-start px-6 pt-[110px] mx-auto max-w-7xl md:pt-28 md:px-7 docs">