diff --git a/package.json b/package.json index 6b9726cdc..a34f263bf 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d28a693bf..e8018c03e 100644 --- a/pnpm-lock.yaml +++ b/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: - resolution: {integrity: sha512-1ZCfQtII2XeFDrtqXL2cdQ/diGrLxzRB3YMyQjn8m7GSGQrJfGST2iuqMpWnS/ZlifhtjgR/SX0Jy6Uij6lRLA==} - engines: {node: ^16.0.0 || >=18.0.0} + /nanostores/0.9.1: + resolution: {integrity: sha512-DmAL3oTieICqnl2XVq5wegFE7EXIoPnIv1CNWNGEhXpwrHk7Prctch4/nX5x95i95WHdesI5sPeoNAUFpFsGtg==} + engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0} dev: false /napi-build-utils/1.0.2: diff --git a/src/components/Activity/ActivityPage.tsx b/src/components/Activity/ActivityPage.tsx index 3268c777a..851730d15 100644 --- a/src/components/Activity/ActivityPage.tsx +++ b/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(''); }); }} /> diff --git a/src/components/PageProgress.tsx b/src/components/PageProgress.tsx index b192e9767..dcba3b744 100644 --- a/src/components/PageProgress.tsx +++ b/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 $pageLoadingMessage = useStore(pageLoadingMessage); + const $pageProgressMessage = useStore(pageProgressMessage); - if (!$pageLoadingMessage) { - if (!initialMessage || !isFirstRender) { - return null; - } + useEffect(() => { + setMessage($pageProgressMessage); + }, [$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" />

- {$pageLoadingMessage || initialMessage} + {message} ...

diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx index 2305377ec..450815fb5 100644 --- a/src/components/TopicDetail/TopicDetail.tsx +++ b/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(''); }); }); diff --git a/src/components/UpdatePassword/UpdatePasswordForm.tsx b/src/components/UpdatePassword/UpdatePasswordForm.tsx index c152d8775..7477aa77f 100644 --- a/src/components/UpdatePassword/UpdatePasswordForm.tsx +++ b/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(''); }); }, []); diff --git a/src/components/UpdateProfile/UpdateProfileForm.tsx b/src/components/UpdateProfile/UpdateProfileForm.tsx index 1c5e7cabf..2686a5801 100644 --- a/src/components/UpdateProfile/UpdateProfileForm.tsx +++ b/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(''); }); }, []); diff --git a/src/hooks/use-is-first-render.ts b/src/hooks/use-is-first-render.ts deleted file mode 100644 index 08b0a92d6..000000000 --- a/src/hooks/use-is-first-render.ts +++ /dev/null @@ -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 -} \ No newline at end of file diff --git a/src/stores/page.ts b/src/stores/page.ts index 05326076b..187825095 100644 --- a/src/stores/page.ts +++ b/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);