shx-3d-render

snippets/shx-loading-spinner.liquid

@@ -2,12 +2,57 @@
 
 {% if content_type == 'body' %}
 
+    <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>
+                `;
 
-{% elsif content_type == 'head' %}
+                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 {