feat: Add loading spinner to OpenSeaDragon viewer

This commit adds a Tailwind-based SVG loading spinner to the OpenSeaDragon viewer.
chnm · Aug 1, 2024 · 08fe9a5 · 08fe9a5
1 parent f6647e6
commit 08fe9a5
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/static/css/custom.css b/static/css/custom.css
@@ -24,3 +24,17 @@
 .active {
     font-weight: bold;
 }
+
+.loader {
+    border-top-color: #3498db;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/templates/manuscript_page.html b/templates/manuscript_page.html
@@ -13,6 +13,28 @@
     <div class="relative max-w-full mx-auto px-4 sm:px-6 lg:px-8 py-2">
         <div class="mt-12 grid grid-cols-4 gap-2">
             <div class="col-span-3">
+                <div id="loading-spinner" class="flex justify-center items-center h-full">
+                    <svg class="h-32 w-32 animate-spin" viewBox="0 0 100 100">
+                        <circle
+                            fill="none"
+                            stroke-width="10"
+                            class="stroke-current opacity-40"
+                            cx="50"
+                            cy="50"
+                            r="40"
+                        />
+                        <circle
+                            fill="none"
+                            stroke-width="10"
+                            class="stroke-current"
+                            stroke-dasharray="250"
+                            stroke-dashoffset="210"
+                            cx="50"
+                            cy="50"
+                            r="40"
+                        />
+                    </svg>
+                </div>
                 <div id="openseadragon_viewer" class="openseadragon">
                     <script type="text/javascript">
                         let page_url = encodeURI("{{ cleaned_url }}")
@@ -27,6 +49,11 @@
                             homeFillsViewer: false,
                             visibilityRatio: 1,
                         })
+
+                        viewer.addHandler('open', function () {
+                            document.getElementById('loading-spinner').style.display = 'none';
+                            document.getElementById('openseadragon_viewer').classList.remove('hidden');
+                        });
                     </script>
                 </div>
                 {% if previous_page %}
@@ -81,8 +108,10 @@
                     {% if manuscript_page.attached_images.all.1 %}
                         <hr class="mt-3 mb-3" />
                         <div class="mt-4">
-                            <a class="underline hover:no-underline" href="{% url 'forensic_page' manuscript_page.attached_images.all.1.id %}">
-                                <img class="w-32 h-32 object-cover" src="{{ manuscript_page.attached_images.all.1.image.url }}" alt="First Forensic Image">
+                            <a class="underline hover:no-underline"
+                               href="{% url 'forensic_page' manuscript_page.attached_images.all.1.id %}">
+                                <img class="w-32 h-32 object-cover" src="{{ manuscript_page.attached_images.all.1.image.url }}"
+                                     alt="First Forensic Image">
                                 <caption>View the forensic images for this page</caption>
                             </a>
                         </div>
@@ -152,7 +181,8 @@ <h3 class="text-center font-semibold text-1xl pb-4 mb-4 uppercase">Document Deta
                 <li><strong>Page</strong>: {{ manuscript_page.page_range }}</li>
                 <li><strong>Page tagged with</strong>:
                     {% for tag in manuscript_page.tags.all %}
-                        <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-winterthur-dk-blue ring-1 ring-inset ring-blue-700/10">{{ tag.name }}</span>
+                        <span
+                            class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-winterthur-dk-blue ring-1 ring-inset ring-blue-700/10">{{ tag.name }}</span>
                     {% endfor %}
                 </li>
             </ul>
@@ -169,9 +199,8 @@ <h3 class="text-center font-semibold text-1xl pb-4 mb-4 uppercase">Document Deta
             <h2 class="text-center font-semibold text-1xl pb-4 mb-4 uppercase">Cite this page</h2>
             <p><em>The Denig Manuscript</em>, Winterthur Museum, Garden & Library and the Roy Rosenzweig Center
                 for
-                History and New Media (2024--): p. {{ manuscript_page.page_range }}. <a
-                    href="{% url 'manuscript' %}"
-                    class="text-winterthur-dk-blue hover:underline">https://denig.rrchnm.org/manuscript/{{manuscript_page.id}}</a>
+                History and New Media (2024--): p. {{ manuscript_page.page_range }}. <a href="{% url 'manuscript' %}"
+                                                                                        class="text-winterthur-dk-blue hover:underline">https://denig.rrchnm.org/manuscript/{{manuscript_page.id}}</a>
             </p>
         </div>
     </div>