diff --git a/src/components/PageProgress.tsx b/src/components/PageProgress.tsx index 4d24ce68c..b192e9767 100644 --- a/src/components/PageProgress.tsx +++ b/src/components/PageProgress.tsx @@ -1,11 +1,22 @@ import { useStore } from '@nanostores/preact'; -import { pageLoadingMessage } from '../stores/page'; +import { useIsFirstRender } from '../hooks/use-is-first-render'; import SpinnerIcon from '../icons/spinner.svg'; +import { pageLoadingMessage } from '../stores/page'; -export function PageProgress() { +export interface Props { + initialMessage: string; +} + +export function PageProgress(props: Props) { + const { initialMessage } = props; + + const isFirstRender = useIsFirstRender(); const $pageLoadingMessage = useStore(pageLoadingMessage); + if (!$pageLoadingMessage) { - return null; + if (!initialMessage || !isFirstRender) { + return null; + } } return ( @@ -19,7 +30,7 @@ export function PageProgress() { className="h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-4 sm:w-4" />

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

diff --git a/src/components/Setting/UpdatePasswordForm.tsx b/src/components/Setting/UpdatePasswordForm.tsx index e519416d0..f1498aab8 100644 --- a/src/components/Setting/UpdatePasswordForm.tsx +++ b/src/components/Setting/UpdatePasswordForm.tsx @@ -1,6 +1,4 @@ -import { useCallback, useEffect, useState } from 'preact/hooks'; -import Cookies from 'js-cookie'; -import { TOKEN_COOKIE_NAME } from '../../lib/jwt'; +import { useEffect, useState } from 'preact/hooks'; import { httpGet, httpPost } from '../../lib/http'; import { pageLoadingMessage } from '../../stores/page'; @@ -73,7 +71,6 @@ export default function UpdatePasswordForm() { }; useEffect(() => { - pageLoadingMessage.set('Loading profile'); loadProfile().finally(() => { pageLoadingMessage.set(''); }); diff --git a/src/components/Setting/UpdateProfileForm.tsx b/src/components/Setting/UpdateProfileForm.tsx index 2751ff574..8c314b949 100644 --- a/src/components/Setting/UpdateProfileForm.tsx +++ b/src/components/Setting/UpdateProfileForm.tsx @@ -74,7 +74,6 @@ export function UpdateProfileForm() { // Make a request to the backend to fill in the form with the current values useEffect(() => { - pageLoadingMessage.set('Loading profile'); loadProfile().finally(() => { pageLoadingMessage.set(''); }); diff --git a/src/hooks/use-is-first-render.ts b/src/hooks/use-is-first-render.ts new file mode 100644 index 000000000..08b0a92d6 --- /dev/null +++ b/src/hooks/use-is-first-render.ts @@ -0,0 +1,13 @@ +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/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 233093890..8cc8f1b9a 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -18,6 +18,7 @@ export interface Props { keywords?: string[]; noIndex?: boolean; canonicalUrl?: string; + initialLoadingMessage?: string; permalink?: string; jsonLd?: Record[]; } @@ -32,6 +33,7 @@ const { canonicalUrl: givenCanonical = '', jsonLd = [], redirectUrl = '', + initialLoadingMessage = '', } = Astro.props; // Remove trailing slashes to consider the page as canonical @@ -148,7 +150,7 @@ const gaPageIdentifier = Astro.url.pathname - + + diff --git a/src/pages/settings/update-profile.astro b/src/pages/settings/update-profile.astro index e7096e8bc..cd6f2fba3 100644 --- a/src/pages/settings/update-profile.astro +++ b/src/pages/settings/update-profile.astro @@ -4,7 +4,11 @@ import { UpdateProfileForm } from '../../components/Setting/UpdateProfileForm'; import SettingLayout from '../../layouts/SettingLayout.astro'; --- - +