Refactor page progress implementation

package.json

@@ -30,7 +30,7 @@
     "astro-compress": "^1.1.46",
     "jose": "^4.14.4",
     "js-cookie": "^3.0.5",
-    "nanostores": "^0.8.1",
+    "nanostores": "^0.9.1",
     "node-html-parser": "^6.1.5",
     "npm-check-updates": "^16.10.12",
     "preact": "^10.15.1",

pnpm-lock.yaml

@@ -17,7 +17,7 @@ specifiers:
   js-cookie: ^3.0.5
   js-yaml: ^4.1.0
   markdown-it: ^13.0.1
-  nanostores: ^0.8.1
+  nanostores: ^0.9.1
   node-html-parser: ^6.1.5
   npm-check-updates: ^16.10.12
   openai: ^3.2.1
@@ -34,12 +34,12 @@ dependencies:
   '@astrojs/sitemap': 1.3.1
   '@astrojs/tailwind': 3.1.3_w4mihal45edfrnncnioktvfyqy
   '@fingerprintjs/fingerprintjs': 3.4.1
-  '@nanostores/preact': 0.5.0_jsxc2udxlr5p4sp4ibwq7kjqyu
+  '@nanostores/preact': 0.5.0_m2wbkjxz7237icvaxqi7ignbgm
   astro: 2.5.5
   astro-compress: 1.1.46
   jose: 4.14.4
   js-cookie: 3.0.5
-  nanostores: 0.8.1
+  nanostores: 0.9.1
   node-html-parser: 6.1.5
   npm-check-updates: 16.10.12
   preact: 10.15.1
@@ -689,14 +689,14 @@ packages:
     resolution: {integrity: sha512-4/RWEeXDO6bocPONheFe6gX/oQdP/bEpv0oL4HqjPP5DCenBSt0mHgahppY49N0CpsaqffdwPq+TlX9CYOq2Dw==}
     dev: false
 
-  /@nanostores/preact/0.5.0_jsxc2udxlr5p4sp4ibwq7kjqyu:
+  /@nanostores/preact/0.5.0_m2wbkjxz7237icvaxqi7ignbgm:
     resolution: {integrity: sha512-Zq5DEAY+kIfwJ1NPd43D1mpsbISuiD6N/SuTHrt/8jUoifLwXaReaZMAnvkvbIGOgcB1Hy++A9jZix2taNNYxQ==}
     engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
     peerDependencies:
       nanostores: ^0.9.0
       preact: '>=10.0.0'
     dependencies:
-      nanostores: 0.8.1
+      nanostores: 0.9.1
       preact: 10.15.1
     dev: false
 
@@ -3782,9 +3782,9 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
-  /nanostores/0.8.1:
+  /nanostores/0.9.1:
-    resolution: {integrity: sha512-1ZCfQtII2XeFDrtqXL2cdQ/diGrLxzRB3YMyQjn8m7GSGQrJfGST2iuqMpWnS/ZlifhtjgR/SX0Jy6Uij6lRLA==}
+    resolution: {integrity: sha512-DmAL3oTieICqnl2XVq5wegFE7EXIoPnIv1CNWNGEhXpwrHk7Prctch4/nX5x95i95WHdesI5sPeoNAUFpFsGtg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
+    engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0}
     dev: false
 
   /napi-build-utils/1.0.2:

src/components/Activity/ActivityPage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'preact/hooks';
 import { httpGet } from '../../lib/http';
 import { ActivityCounters } from './ActivityCounters';
 import { ResourceProgress } from './ResourceProgress';
-import { pageLoadingMessage } from '../../stores/page';
+import { pageProgressMessage } from '../../stores/page';
 import { EmptyActivity } from './EmptyActivity';
 
 type ActivityResponse = {
@@ -71,7 +71,7 @@ export function ActivityPage() {
 
   useEffect(() => {
     loadActivity().finally(() => {
-      pageLoadingMessage.set('');
+      pageProgressMessage.set('');
       setIsLoading(false);
     });
   }, []);
@@ -119,9 +119,9 @@ export function ActivityPage() {
                     updatedAt={roadmap.updatedAt}
                     title={roadmap.title}
                     onCleared={() => {
-                      pageLoadingMessage.set('Updating activity');
+                      pageProgressMessage.set('Updating activity');
                       loadActivity().finally(() => {
-                        pageLoadingMessage.set('');
+                        pageProgressMessage.set('');
                       });
                     }}
                   />
@@ -145,9 +145,9 @@ export function ActivityPage() {
                     title={bestPractice.title}
                     updatedAt={bestPractice.updatedAt}
                     onCleared={() => {
-                      pageLoadingMessage.set('Updating activity');
+                      pageProgressMessage.set('Updating activity');
                       loadActivity().finally(() => {
-                        pageLoadingMessage.set('');
+                        pageProgressMessage.set('');
                       });
                     }}
                   />

src/components/PageProgress.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/preact';
-import { useIsFirstRender } from '../hooks/use-is-first-render';
 import SpinnerIcon from '../icons/spinner.svg';
-import { pageLoadingMessage } from '../stores/page';
+import { pageProgressMessage } from '../stores/page';
+import { useEffect, useState } from 'preact/hooks';
 
 export interface Props {
   initialMessage: string;
@@ -9,14 +9,16 @@ export interface Props {
 
 export function PageProgress(props: Props) {
   const { initialMessage } = props;
+  const [message, setMessage] = useState(initialMessage);
 
-  const isFirstRender = useIsFirstRender();
+  const $pageProgressMessage = useStore(pageProgressMessage);
-  const $pageLoadingMessage = useStore(pageLoadingMessage);
 
-  if (!$pageLoadingMessage) {
+  useEffect(() => {
-    if (!initialMessage || !isFirstRender) {
+    setMessage($pageProgressMessage);
-      return null;
+  }, [$pageProgressMessage]);
-    }
+
+  if (!message) {
+    return null;
   }
 
   return (
@@ -30,7 +32,7 @@ export function PageProgress(props: Props) {
             className="h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-4 sm:w-4"
           />
           <h1 className="ml-2">
-            {$pageLoadingMessage || initialMessage}
+            {message}
             <span className="animate-pulse">...</span>
           </h1>
         </div>

src/components/TopicDetail/TopicDetail.tsx

@@ -14,7 +14,7 @@ import {
   ResourceType,
   updateResourceProgress as updateResourceProgressApi,
 } from '../../lib/resource-progress';
-import { pageLoadingMessage, sponsorHidden } from '../../stores/page';
+import { pageProgressMessage, sponsorHidden } from '../../stores/page';
 import { TopicProgressButton } from './TopicProgressButton';
 
 export function TopicDetail() {
@@ -64,7 +64,7 @@ export function TopicDetail() {
       return;
     }
 
-    pageLoadingMessage.set('Updating');
+    pageProgressMessage.set('Updating');
 
     // Toggle the topic status
     isTopicDone({ topicId, resourceId, resourceType })
@@ -89,7 +89,7 @@ export function TopicDetail() {
         console.error(err);
       })
       .finally(() => {
-        pageLoadingMessage.set('');
+        pageProgressMessage.set('');
       });
   });
 

src/components/UpdatePassword/UpdatePasswordForm.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 import { httpGet, httpPost } from '../../lib/http';
-import { pageLoadingMessage } from '../../stores/page';
+import { pageProgressMessage } from '../../stores/page';
 
 export default function UpdatePasswordForm() {
   const [authProvider, setAuthProvider] = useState('');
@@ -72,7 +72,7 @@ export default function UpdatePasswordForm() {
 
   useEffect(() => {
     loadProfile().finally(() => {
-      pageLoadingMessage.set('');
+      pageProgressMessage.set('');
     });
   }, []);
 

src/components/UpdateProfile/UpdateProfileForm.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 import { httpGet, httpPost } from '../../lib/http';
-import { pageLoadingMessage } from '../../stores/page';
+import { pageProgressMessage } from '../../stores/page';
 import UploadProfilePicture from './UploadProfilePicture';
 
 export function UpdateProfileForm() {
@@ -75,7 +75,7 @@ export function UpdateProfileForm() {
   // Make a request to the backend to fill in the form with the current values
   useEffect(() => {
     loadProfile().finally(() => {
-      pageLoadingMessage.set('');
+      pageProgressMessage.set('');
     });
   }, []);
 

src/hooks/use-is-first-render.ts

@@ -1,13 +0,0 @@
-import { useRef } from "preact/hooks"
-
-export function useIsFirstRender(): boolean {
-  const isFirst = useRef(true)
-
-  if (isFirst.current) {
-    isFirst.current = false
-
-    return true
-  }
-
-  return isFirst.current
-}

src/stores/page.ts

@@ -1,4 +1,4 @@
 import { atom } from 'nanostores';
 
-export const pageLoadingMessage = atom('');
+export const pageProgressMessage = atom('');
 export const sponsorHidden = atom(false);