Proper dispose for reading indicator

linkdotnet · Apr 29, 2023 · 7ffbd31 · 7ffbd31
1 parent 2de105a
commit 7ffbd31
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git 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
@@ -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);
+}