[update] page load animation

src/app/components/content/content.component.html

@@ -1,12 +1,8 @@
 <app-sandbox
-  *ngIf="findComponent()"
-  [component]="findComponent()"
+  *ngIf="component"
+  [component]="component"
 ></app-sandbox>
 <markdown
-  [src]="
-    router.url !== '/'
-      ? './assets/docs' + router.url.split('#')[0] + '/index.md'
-      : ''
-  "
-  (load)="handleLoad()"
+  [src]="getMarkdownPath()"
+  (ready)="handleLoad()"
 ></markdown>

src/app/components/content/content.component.scss

@@ -6,6 +6,13 @@
   height: calc(100% - 72px);
   margin: -16px;
   overflow: auto;
+  &.loaded {
+    transition: .5s all ease-in-out;
+  }
+  &:not(.loaded) {
+    margin-top: 16px;
+    opacity: 0;
+  }
   > * {
     padding: 0 64px 32px 64px;
     margin: auto;

src/app/components/content/content.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit } from '@angular/core';
 import { DataService } from 'src/app/services/data.service';
 import { Router } from '@angular/router';
 
@@ -8,22 +8,35 @@ import { Router } from '@angular/router';
   styleUrls: ['./content.component.scss'],
 })
 export class ContentComponent implements OnInit {
-  constructor(public data: DataService, public router: Router) {}
+  component: any;
+  constructor(
+    public data: DataService,
+    public router: Router,
+    public elRef: ElementRef
+  ) {}
 
   ngOnInit(): void {}
 
-  findComponent(): boolean {
-    return this.data.sandbox.find(
-      ({ name }) => name === this.data.getNameFromUrl()
-    );
+  getMarkdownPath(): string {
+    return this.router.url !== '/'
+      ? `./assets/docs${this.router.url.split('#')[0]}/index.md`
+      : '';
   }
 
   handleLoad(): void {
+    this.elRef.nativeElement.classList.remove('loaded');
+    setTimeout(() => {
+      this.elRef.nativeElement.classList.add('loaded');
+    }, 0);
     // wait for iframes to load and call set theme
     document.querySelectorAll('iframe').forEach((el) => {
       el.onload = () => this.data.setDemoTheme(el);
     });
     // scroll content to top
     document.querySelector('app-content').scrollTo(0, 0);
+    // fetch new component
+    this.component = this.data.sandbox.find(
+      ({ name }) => name === this.data.getNameFromUrl()
+    );
   }
 }

src/app/services/data.service.ts

@@ -27,7 +27,6 @@ export class DataService {
     if (el) {
       const body = el.contentWindow.document.body;
       body.setAttribute('theme', this.appTheme);
-      body.querySelector('.demo').style.opacity = '1';
     } else {
       document.querySelectorAll('iframe').forEach((frame) => {
         frame.contentWindow.document.body.setAttribute('theme', this.appTheme);

src/assets/docs/demo-styles.css

@@ -1,5 +1,4 @@
 .demo {
-  opacity: 0;
   display: flex;
   align-items: center;
   justify-content: center;