Simplify loading animation

src/page/basics/preview/preview.html.ts

@@ -7,8 +7,8 @@ export const generate = ({ alt }: { alt: string }): html => `
   <div class="preview">
     <img image-viewer-ignore class="poster" />
     <div class="overlay">
-      <iframe title="${alt}" height=300 allowfullscreen loading="lazy"></iframe>
       <div class="loading">${loading}</div>
+      <iframe title="${alt}" height=300 allowfullscreen loading="lazy"></iframe>
       <div class="load-button">${play}</div>
     </div>
   </div>

src/page/basics/preview/preview.scss

@@ -32,13 +32,10 @@
       }
     }
 
-    .loading {
-      visibility: hidden;
-      &,
-      & > svg {
-        @include square(var(--large-icon-size));
-        @include absolute-center;
-      }
+    .loading,
+    .loading > svg {
+      @include square(var(--large-icon-size));
+      @include absolute-center;
     }
 
     iframe {

src/page/basics/preview/preview.ts

@@ -11,9 +11,6 @@ export class Preview extends PageElement {
     this.url += '?portfolioView';
     this.attachElementByReplacing('.poster', new Image(poster, alt));
     this.query('.load-button').addEventListener('click', this.loadContent.bind(this));
-    this.query('iframe').addEventListener('load', () => {
-      this.htmlRoot.classList.remove('waiting');
-    });
   }
 
   public handleOnLoadEvent(event: OnLoadEvent): OnLoadEvent {
@@ -27,7 +24,6 @@ export class Preview extends PageElement {
   }
 
   public loadContent() {
-    this.htmlRoot.classList.add('waiting');
     this.htmlRoot.classList.add('loaded');
     (this.query('iframe') as HTMLIFrameElement).src = this.url;
   }