feat: a bit better performance to fetch gif on publish screen

Author: peterpeterparker

studio/src/app/components/editor/publish/app-publish-done/app-publish-done.scss

@@ -16,6 +16,7 @@ app-publish-done {
       height: 10rem;
 
       border: 1px solid var(--ion-color-tertiary);
+      background: rgba(var(--ion-color-tertiary-rgb), 0.4);
       box-shadow: 1px 2px 8px 2px rgba(var(--ion-color-tertiary-rgb), 0.2);
     }
 

studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx

@@ -29,7 +29,7 @@ export class AppPublishDone {
         this.gifService = GifService.getInstance();
     }
 
-    async componentDidLoad() {
+    async componentWillLoad() {
         await this.initRandomGifUrl();
     }
 
@@ -63,9 +63,9 @@ export class AppPublishDone {
     }
 
     private renderGif() {
-        if (this.gif && this.gif.media && this.gif.media.length > 0 && this.gif.media[0].tinygif && this.gif.media[0].tinygif.url) {
-            return <deckgo-lazy-img imgSrc={this.gif.media[0].tinygif.url}
-                                    imgAlt={this.gif.title ? this.gif.title : this.gif.media[0].tinygif.url}></deckgo-lazy-img>
+        if (this.gif && this.gif.media && this.gif.media.length > 0 && this.gif.media[0].nanogif && this.gif.media[0].nanogif.url) {
+            return <deckgo-lazy-img imgSrc={this.gif.media[0].nanogif.url}
+                                    imgAlt={this.gif.title ? this.gif.title : this.gif.media[0].nanogif.url}></deckgo-lazy-img>
         } else {
             return undefined;
         }