Use CancelationToken to end thread with cursor

ChatRPG/Pages/Index.razor

@@ -1,5 +1,5 @@
 @page "/"
-
+@implements IDisposable
 
 <AuthorizeView>
     <NotAuthorized>
@@ -24,16 +24,16 @@
     private readonly string _fullTitleText = "ChatRPG";
     private string _titleDisplayText = "";
     private bool _cursorVisible = true;
-    private bool _isPageLoaded = true; // set to false when leaving page
+    private readonly CancellationTokenSource _cts = new CancellationTokenSource();
 
     protected override async Task OnInitializedAsync()
     {
         // Start cursor blinking on a separate thread
-        await Task.Factory.StartNew(BlinkCursorAsync, CancellationToken.None, TaskCreationOptions.LongRunning, TaskScheduler.Default);
-        await TypingAsync();
+        await Task.Factory.StartNew(() => BlinkCursorAsync(_cts.Token), _cts.Token, TaskCreationOptions.LongRunning, TaskScheduler.Default);
+        await TypingAnimateAsync();
     }
 
-    private async Task TypingAsync()
+    private async Task TypingAnimateAsync()
     {
         for (int i = 0; i <= _fullTitleText.Length; i++)
         {
@@ -43,14 +43,20 @@
         }
     }
 
-    private async Task BlinkCursorAsync()
+    private async Task BlinkCursorAsync(CancellationToken cancellationToken)
     {
-        while (_isPageLoaded)
+        while (!cancellationToken.IsCancellationRequested)
         {
             _cursorVisible = !_cursorVisible; // Toggle cursor visibility
-            await Task.Delay(500); // Adjust the delay between blinks
+            await Task.Delay(500, cancellationToken); // Adjust the delay between blinks
             await InvokeAsync(StateHasChanged);
         }
     }
 
+    public void Dispose()
+    {
+        _cts.Cancel(); // Request cancellation when the component is about to be removed
+        _cts.Dispose(); // Dispose of the CancellationTokenSource
+    }
+
 }

ChatRPG/wwwroot/css/site.css

@@ -151,13 +151,6 @@ a, .btn-link {
     animation: fadeIn 3s;
 }
 
-.typing {
-    overflow: hidden; /* Hide overflowing text */
-    border-right: .15em solid orange; /* Typing cursor */
-    white-space: nowrap; /* Keeps text on a single line */
-    margin: 0 auto; /* Center the text horizontally */
-}
-
 .cursor {
     position: relative;
     top: -0.1em; /* Adjust the value to raise or lower the cursor */