feat(training): add load indicator on output

fpaul-1A · Oct 18, 2024 · 40aa915 · 40aa915
1 parent 4aaf5e5
commit 40aa915
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 1 deletion.
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html
@@ -6,10 +6,14 @@
       </ng-template>
     </li>
     <li ngbNavItem class="nav-item" role="presentation" [destroyOnHide]="false">
-      <a ngbNavLink class="nav-link" [class.active]="activeTab === 'output'" (click)="activeTab = 'output'">Output</a>
+      <a ngbNavLink class="nav-link ps-5" [class.active]="activeTab === 'output'" (click)="activeTab = 'output'">
+        Output
+        <span class="fa-arrows-rotate terminal-active-indicator" [class.invisible]="!terminalActive()"></span>
+      </a>
       <ng-template ngbNavContent>
         <code-editor-terminal id="tab-content2" class="d-block h-100"
                               (disposed)="webContainerService.runner.disposeCommandOutputTerminal()"
+                              (terminalActivity)="terminalActivity.next()"
                               (terminalUpdated)="webContainerService.runner.registerCommandOutputTerminal($event)">
         </code-editor-terminal>
       </ng-template>

diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss
@@ -14,4 +14,21 @@ code-editor-control {
     border: 1px solid black;
     height: 100%;
   }
+
+  .terminal-active-indicator {
+    display: inline-block;
+    font-weight: bold;
+    color: var(--df-recommend-warning-color);
+    transform: rotate(0);
+    animation: rotate-animation 1s linear infinite;
+  }
+
+  @keyframes rotate-animation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
 }
diff --git a/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts b/apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts
@@ -9,7 +9,9 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {NgbNav, NgbNavContent, NgbNavItem, NgbNavLink, NgbNavOutlet} from '@ng-bootstrap/ng-bootstrap';
+import {distinctUntilChanged, map, of, repeat, Subject, throttleTime, timeout} from 'rxjs';
 import {WebContainerService} from '../../../services';
 import {CodeEditorTerminalComponent} from '../code-editor-terminal';
 
@@ -56,6 +58,16 @@ export class CodeEditorControlComponent implements OnDestroy, AfterViewInit {
    */
   public activeTab: 'preview' | 'output' | 'terminal' = 'preview';
 
+  public readonly terminalActivity = new Subject<void>();
+
+  public readonly terminalActive = toSignal<boolean>(this.terminalActivity.asObservable().pipe(
+    throttleTime(50),
+    map(() => true),
+    timeout({each: 2000, with: () => of(false)}),
+    distinctUntilChanged(),
+    repeat()
+  ));
+
   /**
    * @inheritDoc
    */

diff --git a/apps/showcase/src/components/training/code-editor-terminal/code-editor-terminal.component.ts b/apps/showcase/src/components/training/code-editor-terminal/code-editor-terminal.component.ts
@@ -3,8 +3,10 @@ import {
   type AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
   ElementRef,
   EventEmitter,
+  inject,
   type OnDestroy,
   Output,
   ViewChild
@@ -40,6 +42,11 @@ export class CodeEditorTerminalComponent implements OnDestroy, AfterViewChecked,
    */
   @Output()
   public readonly terminalUpdated = new EventEmitter<Terminal>();
+  /**
+   * Inform the parent that something got written in the terminal
+   */
+  @Output()
+  public readonly terminalActivity = new EventEmitter<void>();
   /**
    * Inform the parent that the terminal of the component has been disposed of
    */
@@ -48,6 +55,10 @@ export class CodeEditorTerminalComponent implements OnDestroy, AfterViewChecked,
 
   constructor() {
     this.terminal.loadAddon(this.fitAddon);
+    const disposable = this.terminal.onWriteParsed(() => {
+      this.terminalActivity.emit();
+    });
+    inject(DestroyRef).onDestroy(() => disposable.dispose());
   }
 
   /**