From be75bfdd0b2d3c5b9307b93dcfa54fa7266fe63c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 9 Mar 2022 16:19:29 -0800
Subject: [PATCH 1/2] Only updating reading progress if scroll position changes

---
 .../web/components/templates/article/Article.tsx  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index 2f729a42b..268bc8fe6 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -28,9 +28,7 @@ export type ArticleProps = {
 export function Article(props: ArticleProps): JSX.Element {
   const highlightTheme = isDarkTheme() ? 'dark' : 'default'
 
-  const [readingProgress, setReadingProgress] = useState(
-    props.initialReadingProgress || 0
-  )
+  const [readingProgress, setReadingProgress] = useState(props.initialReadingProgress)
 
   const [readingAnchorIndex, setReadingAnchorIndex] = useState(
     props.initialAnchorIndex
@@ -43,21 +41,24 @@ export function Article(props: ArticleProps): JSX.Element {
 
   useReadingProgressAnchor(articleContentRef, setReadingAnchorIndex)
 
-  const debouncedReadingProgress = useDebounce(readingProgress, 1000)
-  const debouncedReadingAnchorIndex = useDebounce(readingAnchorIndex, 1000)
+  const debouncedReadingProgress = useDebounce(readingProgress, 1000);
 
   useEffect(() => {
-    ;(async () => {
+    (async () => {
+      if (!debouncedReadingProgress) return
       await articleReadingProgressMutation({
         id: props.articleId,
         readingProgressPercent: debouncedReadingProgress,
         readingProgressAnchorIndex: readingAnchorIndex,
       })
     })()
+
+    // We don't react to changes to readingAnchorIndex we
+    // only care about the progress (scroll position) changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     props.articleId,
     debouncedReadingProgress,
-    debouncedReadingAnchorIndex,
     readingAnchorIndex,
   ])
 

From f29d0fdb713bab310218f91634f7cacb5a842e96 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 9 Mar 2022 19:17:33 -0800
Subject: [PATCH 2/2] Prettier fix

---
 packages/web/components/templates/article/Article.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/components/templates/article/Article.tsx b/packages/web/components/templates/article/Article.tsx
index 268bc8fe6..ded8f2a4c 100644
--- a/packages/web/components/templates/article/Article.tsx
+++ b/packages/web/components/templates/article/Article.tsx
@@ -44,7 +44,7 @@ export function Article(props: ArticleProps): JSX.Element {
   const debouncedReadingProgress = useDebounce(readingProgress, 1000);
 
   useEffect(() => {
-    (async () => {
+    ;(async () => {
       if (!debouncedReadingProgress) return
       await articleReadingProgressMutation({
         id: props.articleId,