shx-3d-render

snippets/shx-loading-spinner.liquid

@@ -2,13 +2,58 @@
 
 {% if content_type == 'body' %}
 
-    <div class="shx-loading-spinner-container">
+    <shx-loading-spinner/>
-        {% 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>
 
 {% 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% {