shx-3d-render

layout/theme.liquid

@@ -375,6 +375,9 @@
     {% render 'shx-3d-render-input'
       , content_type: 'init' %}
 
+    {% render 'shx-loading-spinner'
+      , content_type: 'head' %}
+
     <script
       src="{{ 'anime.min.js' | asset_url }}"
       defer="defer"

snippets/shx-3d-render-input.liquid

@@ -146,12 +146,17 @@
 
             this.content = this.container.querySelector('.shx-input-forms-content');
 
+            this.Viewer3DContainer = document.createElement('div');
+            this.Viewer3DContainer.classList.add('shx-threejs-renderer-container');
+            this.container.appendChild(this.Viewer3DContainer);
+
+
             this.Viewer3D = document.createElement('iframe');
             this.Viewer3D.src = "https://3d-viewer.shinnex.de/";
             this.Viewer3D.classList.add('shx-threejs-renderer');
             this.Viewer3D.style.width = this.container.offsetWidth + 'px';
             this.Viewer3D.style.height = this.container.offsetWidth + 'px';
-            this.container.appendChild(this.Viewer3D);
+            this.Viewer3DContainer.appendChild(this.Viewer3D);
 
             this.Viewer3D.onload = () => {
                 this.Viewer3D.contentWindow.postMessage(JSON.stringify({"init":{"uuid":this.uuid}}), "*");

snippets/shx-loading-spinner.liquid

@@ -0,0 +1,14 @@
+{% assign content_type = content_type | default: 'body' %} 
+
+{% if content_type == 'body' %}
+
+    <img src="{% render 'shx-logo' %}" width="200px" height="auto">
+
+{% elif content_type == 'head' %}
+
+    <style>
+
+
+    </style>
+
+{% endif %}

snippets/shx-logo.liquid

@@ -0,0 +1 @@
+{{ "LogoMain.svg" | asset_url }}