getting there

frontend/src/app/components/pages/pages.component.html

@@ -10,7 +10,11 @@
 
 <div class="page-container">
   @if (selectedPage(); as page) {
-    <lt-page [page]="page" (dragHappening)="dragHappening.set($event)" />
+    <lt-page
+      [page]="page"
+      [animateInitialStack]="page.id === animateInitialStackPageId()"
+      (dragHappening)="dragHappening.set($event)"
+    />
   } @else {
     <p>Add a new page to get started!</p>
   }
@@ -53,7 +57,11 @@
 }
 
 @if (showWelcome()) {
-  <lt-modal (close)="showWelcome.set(false)">
+  <lt-modal
+    labelledBy="welcome-title"
+    describedBy="welcome-description"
+    (close)="showWelcome.set(false)"
+  >
     <lt-welcome
       (close)="showWelcome.set(false)"
       (startFresh)="showWelcome.set(false)"

frontend/src/app/components/pages/pages.component.ts

@@ -5,6 +5,7 @@ import {
   signal,
   computed,
   effect,
+  OnDestroy,
 } from '@angular/core';
 import { StoreService } from '../../services/store.service';
 import { PageComponent } from '../page/page.component';
@@ -22,7 +23,7 @@ import { Page } from '../../models';
   templateUrl: './pages.component.html',
   styleUrl: './pages.component.scss',
 })
-export class PagesComponent {
+export class PagesComponent implements OnDestroy {
   protected readonly store = inject(StoreService);
 
   /** ID of currently selected page within store.pages(). */
@@ -32,6 +33,8 @@ export class PagesComponent {
   readonly dragHappening = signal(false);
   readonly showWelcome = signal(false);
   readonly confirmDeletePageId = signal<string | null>(null);
+  readonly animateInitialStackPageId = signal<string | null>(null);
+  private exampleAnimationTimer: ReturnType<typeof setTimeout> | null = null;
 
   constructor() {
     effect(() => {
@@ -44,10 +47,27 @@ export class PagesComponent {
   }
 
   onLoadExample(): void {
-    this.store.loadExample();
+    const pageId = this.store.loadExample();
+    this.selectedPageId.set(pageId);
+    this.animateInitialStackPageId.set(pageId);
+    if (this.exampleAnimationTimer !== null) {
+      clearTimeout(this.exampleAnimationTimer);
+    }
+    this.exampleAnimationTimer = setTimeout(() => {
+      if (this.animateInitialStackPageId() === pageId) {
+        this.animateInitialStackPageId.set(null);
+      }
+      this.exampleAnimationTimer = null;
+    }, 2500);
     this.showWelcome.set(false);
   }
 
+  ngOnDestroy(): void {
+    if (this.exampleAnimationTimer !== null) {
+      clearTimeout(this.exampleAnimationTimer);
+    }
+  }
+
   readonly pageNames = computed(() => this.store.pages().map((p) => p.name));
 
   readonly selectedPage = computed<Page | null>(() => {