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
@@ -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