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';
---
-
+