Don't animate pre-loaders once gallery images are loaded (#43)

getumbrel · Oct 6, 2022 · 0979111 · 0979111
1 parent 5e5ae03
commit 0979111
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/global-styles/custom.scss b/src/global-styles/custom.scss
@@ -754,7 +754,7 @@ svg.icon-clock {
       object-fit: contain;
       border-radius: 10px;
       opacity: 1;
-      transition: opacity 0.5s ease;
+      transition: opacity 0.3s linear;
       &.loading {
         opacity: 0;
       }
@@ -769,7 +769,9 @@ svg.icon-clock {
       filter: blur(70px) saturate(2);
       z-index: -1;
       border-radius: 5px;
-      animation: app-gallery-image-preloader linear infinite 5s;
+      &.loading {
+        animation: app-gallery-image-preloader linear infinite 5s;
+      }
     }
     &:nth-child(1) {
       .app-gallery-image-preloader {

diff --git a/src/views/AppStore/AppStoreAppGalleryImage.vue b/src/views/AppStore/AppStoreAppGalleryImage.vue
@@ -4,10 +4,11 @@
   >
     <img
       class="app-gallery-image-preloader"
+      :class="!imageLoaded ? 'loading' : ''"
       :src="`https://getumbrel.github.io/umbrel-apps-gallery/${appId}/icon.svg`"
     />
     <img
-      :class="!this.imageLoaded ? 'loading' : ''"
+      :class="!imageLoaded ? 'loading' : ''"
       class="app-gallery-image"
       :src="`https://getumbrel.github.io/umbrel-apps-gallery/${appId}/${image}`"
       @load="onGalleryImageLoad"