From c75bff104e8929bef6307d6bfaca178ffb4e667a Mon Sep 17 00:00:00 2001
From: Jan Umbach <jan@umbach.dev>
Date: Wed, 19 Jun 2024 22:36:53 +0200
Subject: [PATCH] shx-3d-render

---
 snippets/shx-loading-spinner.liquid | 55 ++++++++++++++++++++++++++---
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/snippets/shx-loading-spinner.liquid b/snippets/shx-loading-spinner.liquid
index 7e8293a..735a887 100644
--- a/snippets/shx-loading-spinner.liquid
+++ b/snippets/shx-loading-spinner.liquid
@@ -1,14 +1,59 @@
-{% assign content_type = content_type | default: 'body' %}
+{% assign content_type = content_type | default: 'body' %} 
 
 {% if content_type == 'body' %}
 
-    <div class="shx-loading-spinner-container">
-        {% render 'shx-logo', class_name:"shx-loading-spinner-mainIcon shx-loading-spinner-unclickable", width:"200px"%}
-        <p class="shx-loading-spinner-unclickable">Lade Vorschau</p>
-    </div>
+    <shx-loading-spinner/>
 
 {% elsif content_type == 'head' %}
 
+    <script>
+        class InputFormsElement extends HTMLElement {
+            constructor() {
+                super();
+
+                this.container = null;
+
+                this.hideTimeout = null;
+            }
+
+            connectedCallback() {
+                this.innerHTML = `
+                    <div class="shx-loading-spinner-container">
+                        {% render 'shx-logo', class_name:"shx-loading-spinner-mainIcon shx-loading-spinner-unclickable", width:"200px"%}        
+                        <p class="shx-loading-spinner-unclickable">Lade Vorschau</p>
+                    </div>
+                `;
+
+                this.container = this.querySelector('.shx-loading-spinner-container');
+            }
+
+            show() {
+                if(this.hideTimeout) {
+                    clearTimeout(this.hideTimeout);
+                }
+
+                this.container.style.display = undefined;
+                setTimeout(() => {
+                    this.container.classList.remove('shx-loading-spinner-container-done');
+                }, 0);
+            }
+
+            hide() {
+                this.container.classList.add('shx-loading-spinner-container-done');
+
+                if (this.hideTimeout) {
+                    clearTimeout(this.hideTimeout);
+                }
+
+                this.hideTimeout = setTimeout(() => {
+                    this.container.style.display = 'none';
+                }, 1000);
+            }
+        }
+
+        customElements.define('shx-loading-spinner', InputFormsElement);
+    </script>
+
     <style>
         @keyframes shx-spinner-pulse {
             0% {