Add animation delay due to loading frame drop

src/hub.html

@@ -170,7 +170,8 @@
                     class="interactable"
                     super-networked-interactable="counter: #media-counter;"
                     body="type: dynamic; shape: none; mass: 1;"
-                    animation__spawn="property: scale; dur: 200; from: 0.5 0.5 0.5; to: 1 1 1; easing: easeInQuad"
+                    scale="0.5 0.5 0.5"
+                    animation__spawn="property: scale; delay: 50; dur: 200; from: 0.5 0.5 0.5; to: 1 1 1; easing: easeInQuad"
                     grabbable
                     stretchable="useWorldPosition: true; usePhysics: never"
                     hoverable
@@ -243,7 +244,8 @@
                     hoverable
                     stretchable
                     camera-tool
-                    animation__spawn="property: scale; dur: 200; from: 0.5 0.5 0.5; to: 1 1 1; easing: easeInQuad"
+                    animation__spawn="property: scale; delay: 50; dur: 200; from: 0.5 0.5 0.5; to: 1 1 1; easing: easeOutQuad"
+                    scale="0.5 0.5 0.5"
                     body="type: dynamic; shape: none; mass: 1;"
                     shape="shape: box; halfExtents: 0.22 0.145 0.1; offset: 0 0.02 0"
                     sticky-object="autoLockOnRelease: true; autoLockOnLoad: true; autoLockSpeedLimit: 0;"

src/utils/media-utils.js

@@ -117,8 +117,11 @@ export const addMedia = (src, template, contentOrigin, resolve = false, resize =
       clearTimeout(fireLoadingTimeout);
 
       if (!entity.classList.contains("pen")) {
+        entity.object3D.scale.setScalar(0.5);
+
         entity.setAttribute("animation__spawn-start", {
           property: "scale",
+          delay: 50,
           dur: 300,
           from: { x: 0.5, y: 0.5, z: 0.5 },
           to: { x: 1.0, y: 1.0, z: 1.0 },