fix: no skeleton for gifs

Author: peterpeterparker

studio/src/app/components/core/app-menu-user/app-menu-user.tsx

@@ -297,7 +297,10 @@ export class AppMenuUser {
                 })
             );
         } else {
-            return undefined;
+            return <ion-item>
+                <ion-icon name="book" slot="start"></ion-icon>
+                <ion-skeleton-text animated></ion-skeleton-text>
+            </ion-item>;
         }
     }
 

studio/src/app/pages/editor/app-editor/app-editor.scss

@@ -2,6 +2,8 @@ app-editor {
   @import "../../../../global/theme/editor/editor-deck";
   @import "../../../../global/theme/editor/editor-deck-fonts";
 
+  @import "../../../../global/theme/editor/editor-loading";
+
   main {
     position: relative;
 
@@ -12,42 +14,6 @@ app-editor {
     margin: auto;
 
     overflow: hidden;
-
-    ion-spinner {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    // Skeleton for new slides
-    [slot]:not([contentEditable]) {
-      position: relative;
-
-      background: var(--ion-color-light);
-      border-color: var(--ion-color-light);
-
-      color: transparent;
-
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      -o-user-select: none;
-      user-select: none;
-
-      pointer-events: none;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, var(--ion-color-light), lighten(#f4f5f8, 7%), var(--ion-color-light));
-        animation: progress 2s ease-in-out infinite;
-      }
-    }
   }
 
   ion-footer {

studio/src/global/theme/editor/editor-loading.scss

@@ -0,0 +1,40 @@
+main {
+  ion-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  :not(deckgo-slide-gif) {
+    // Skeleton for new slides
+     > [slot]:not([contentEditable]) {
+      position: relative;
+
+      background: var(--ion-color-light);
+      border-color: var(--ion-color-light);
+
+      color: transparent;
+
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -o-user-select: none;
+      user-select: none;
+
+      pointer-events: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, var(--ion-color-light), lighten(#f4f5f8, 7%), var(--ion-color-light));
+        animation: progress 2s ease-in-out infinite;
+      }
+    }
+  }
+
+}