From 7ffbd31ab7ca81caa0ab99183d665c4cff1c0c23 Mon Sep 17 00:00:00 2001
From: Steven Giesel <stgiesel35@gmail.com>
Date: Sat, 29 Apr 2023 20:52:34 +0200
Subject: [PATCH] Proper dispose for reading indicator

---
 .../Components/ReadingIndicator.razor          |  6 ++++++
 .../Components/ReadingIndicator.razor.js       | 18 +++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor
index 22448b63..dad2ca71 100644
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor
+++ b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor
@@ -1,4 +1,5 @@
 @inject IJSRuntime JSRuntime
+@implements IAsyncDisposable
 
 <div class="progress-container" @ref="progressContainer">
     <svg class="progress-circle" viewBox="0 0 36 36">
@@ -21,4 +22,9 @@
 			await JSRuntime.InvokeVoidAsync("initCircularReadingProgress", ContainerCssSelector, progressContainer);
 		}
 	}
+
+	public async ValueTask DisposeAsync()
+	{
+		await JSRuntime.InvokeVoidAsync("destroyCircularReadingProgress");
+	}
 }
diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.js b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.js
index 32877e31..3d1b5f7e 100644
--- a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.js
+++ b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.js
@@ -22,6 +22,12 @@ function hideProgressIndicator(progressContainer) {
     }, 500);
 }
 
+function onScroll(onScroll) {
+    if (!rafId) {
+        rafId = requestAnimationFrame(onScroll);
+    }
+}
+
 window.initCircularReadingProgress = (parentContainer, progressContainer) => {
     const progressBar = document.getElementById('progressBar');
 
@@ -44,9 +50,11 @@ window.initCircularReadingProgress = (parentContainer, progressContainer) => {
         rafId = null;
     };
 
-    window.addEventListener('scroll', () => {
-        if (!rafId) {
-            rafId = requestAnimationFrame(onScroll);
-        }
-    });
+    window.addEventListener('scroll', onScroll) ;
 };
+
+window.destroyCircularReadingProgress = () => {
+    window.removeEventListener('scroll', onScroll);
+    clearTimeout(progressTimeout);
+    cancelAnimationFrame(rafId);
+}
\ No newline at end of file