Add a scenario with timers (#19626)

* Add a scenario for measuring navigating between components

* Apply suggestions from code review

Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>

Co-authored-by: Steve Sanderson <SteveSandersonMS@users.noreply.github.com>

src/Components/benchmarkapps/Wasm.Performance/TestApp/Pages/TimerComponent.razor

@@ -0,0 +1,34 @@
+@page "/timer"
+@inject IJSRuntime JSRuntime
+@using System.Threading
+@implements IDisposable
+
+<h1 style="background-color: rgb(@red, @green, @blue)">Timer component</h1>
+
+@code
+{
+    Random random = new Random();
+    Timer timer;
+    int red = 128;
+    int green = 128;
+    int blue = 128;
+
+    protected override void OnInitialized()
+    {
+        timer = new Timer(UpdateColor, null, 0, 100);
+    }
+
+    void UpdateColor(object state)
+    {
+        InvokeAsync(() =>
+        {
+            red = random.Next(0, 256);
+            green = random.Next(0, 256);
+            blue = random.Next(0, 256);
+            StateHasChanged();
+            BenchmarkEvent.Send(JSRuntime, "Finished updating color");
+        });
+    }
+
+    public void Dispose() => timer.Dispose();
+}

src/Components/benchmarkapps/Wasm.Performance/TestApp/Shared/MainLayout.razor

@@ -5,9 +5,10 @@
 <a href="">Home</a> |
 <a href="renderlist">RenderList</a> |
 <a href="json">JSON</a> |
-<a href="orgchart">OrgChart</a>
+<a href="orgchart">OrgChart</a> |
+<a href="timer">Timer</a>
 
-<hr/>
+<hr />
 
 <div>
     @Body

src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/lib/minibench/minibench.ui.js

@@ -175,7 +175,7 @@ class HtmlUI {
       true
     );
     this.runButton.style.display = areAllIdle ? 'block' : 'none';
-    this.stopButton.style.display = areAllIdle ? 'none' : 'block';;
+    this.stopButton.style.display = areAllIdle ? 'none' : 'block';
   }
 
   get globalRunOptions() {

src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/stress.js

@@ -3,6 +3,7 @@ import { HtmlUI } from './lib/minibench/minibench.ui.js';
 import './renderListStress.js';
 import './jsonHandlingStress.js';
 import './orgChartStress.js';
+import './timerStress.js';
 
 import { BlazorStressApp } from './util/BlazorStressApp.js';
 

src/Components/benchmarkapps/Wasm.Performance/TestApp/wwwroot/benchmarks/timerStress.js

@@ -0,0 +1,32 @@
+import { group, benchmark, setup, teardown } from './lib/minibench/minibench.js';
+import { BlazorApp } from './util/BlazorApp.js';
+import { receiveEvent } from './util/BenchmarkEvents.js';
+
+group('Navigation', () => {
+  let app;
+
+  setup(async () => {
+    app = new BlazorApp();
+    await app.start();
+  });
+
+  teardown(() => app.dispose());
+
+  // Timers tend to make for good stress scenarios in helping identify memory leaks / use-after-dispose etc.
+  // While benchmarking it isn't super useful, we'll use it to keep with the theme.
+  benchmark('Timer', () =>
+    benchmarkNavigation(app), {
+    descriptor: {
+      name: 'blazorwasm/timer',
+      description: 'Timers - Time in ms'
+    }
+  });
+});
+
+async function benchmarkNavigation(app) {
+  for (let i = 0; i < 3; i++) {
+    const nextCompletion = receiveEvent('Finished updating color');
+    app.navigateTo('timer');
+    await nextCompletion;
+  }
+}