Skip to content

Commit e8e8787

Browse files
committed
Use requestAnimationFrame
1 parent dc13af1 commit e8e8787

File tree

1 file changed

+17
-5
lines changed

1 file changed

+17
-5
lines changed

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.js

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
let progressTimeout;
2+
let rafId;
23

34
function getContentHeight() {
45
const content = document.querySelector(".blog-inner-content");
@@ -11,18 +12,21 @@ function getContentHeight() {
1112

1213
function showProgressIndicator(progressContainer) {
1314
progressContainer.classList.add("visible");
14-
progressContainer.style.animation = "none";
15+
progressContainer.style.animation = 'none';
1516
}
1617

1718
function hideProgressIndicator(progressContainer) {
18-
progressContainer.style.animation = "fadeOut 0.5s forwards";
19+
progressContainer.style.animation = 'fadeOut 0.5s forwards';
20+
setTimeout(() => {
21+
progressContainer.classList.remove('visible');
22+
}, 500);
1923
}
2024

2125
window.initCircularReadingProgress = () => {
22-
const progressBar = document.getElementById("progressBar");
26+
const progressBar = document.getElementById('progressBar');
2327
const progressContainer = progressBar.closest(".progress-container");
2428

25-
window.addEventListener("scroll", () => {
29+
const onScroll = () => {
2630
clearTimeout(progressTimeout);
2731

2832
const contentHeight = getContentHeight();
@@ -37,5 +41,13 @@ window.initCircularReadingProgress = () => {
3741
progressTimeout = setTimeout(() => {
3842
hideProgressIndicator(progressContainer);
3943
}, 2000);
44+
45+
rafId = null;
46+
};
47+
48+
window.addEventListener('scroll', () => {
49+
if (!rafId) {
50+
rafId = requestAnimationFrame(onScroll);
51+
}
4052
});
41-
};
53+
};

0 commit comments

Comments
 (0)