hides model until preload image has loaded

static/css/3d-tester.css

@@ -2,7 +2,8 @@
 
 .model-wrap {
   padding: 1em;
-  background-color: lightgray;
+  display: none;
+  /*background-color: lightgray;*/
 }
 
 #object {

views/google.tpl

@@ -1,11 +1,13 @@
 % rebase('base.tpl')
 
+<script src="/static/jquery-3.6.0.min.js"></script>
+
 <style>
 model-viewer {
-    width: 500px;
-    height: 500px;
-    outline: none;
-    background-color: transparent;
+  width: 500px;
+  height: 500px;
+  outline: none;
+  background-color: transparent;
 }
 </style>
 
@@ -44,9 +46,6 @@ model-viewer {
 </style>
 %end
 
-
-
-
 <h3>
   <i class="fa fa-folder-o" aria-hidden="true"></i>
   <a href="/list/{{ current_dir.rstrip('/') }}">objects/{{current_dir}}</a>
@@ -59,7 +58,7 @@ model-viewer {
 </h4>
 
 <div class="model-wrap">
-<div id="model" style="display:absolute">
+  <div id="model" style="display:absolute">
     <model-viewer id="3d-model"
                   reveal="interaction"
                   src="{{ object['urls'][0] }}"
@@ -76,8 +75,13 @@ model-viewer {
     <div id="button-load" slot="poster">Load 3D Model</div>
     %end
     </model-viewer>
+  </div>
 </div>
-</div>
-
 
 <script type="module" src="/static/vendor/google/model-viewer.js"></script>
+
+<script>
+jQuery(function($) {
+  $(".model-wrap").show();
+});
+</script>