Fix flickering issue on the profile pages

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 interface Props {
+  initialMessage: string;
+}
+
+export function PageProgress(props: Props) {
+  const { initialMessage } = props;
 
-export function PageProgress() {
+  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"
           />
           <h1 className="ml-2">
-            {$pageLoadingMessage}
+            {$pageLoadingMessage || initialMessage}
             <span className="animate-pulse">...</span>
           </h1>
         </div>

src/components/Setting/UpdatePasswordForm.tsx

@@ -1,6 +1,4 @@
-import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'preact/hooks';
-import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 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('');
     });

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('');
     });

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
+}

src/layouts/BaseLayout.astro

@@ -18,6 +18,7 @@ export interface Props {
   keywords?: string[];
   noIndex?: boolean;
   canonicalUrl?: string;
+  initialLoadingMessage?: string;
   permalink?: string;
   jsonLd?: Record<string, unknown>[];
 }
@@ -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
     </slot>
 
     <Authenticator />
-    <PageProgress client:idle />
+    <PageProgress initialMessage={initialLoadingMessage} client:idle />
     <PageSponsor
       gaPageIdentifier={briefTitle || gaPageIdentifier}
       client:load

src/pages/settings/update-password.astro

@@ -4,7 +4,12 @@ import UpdatePasswordForm from '../../components/Setting/UpdatePasswordForm';
 import SettingLayout from '../../layouts/SettingLayout.astro';
 ---
 
-<SettingLayout title='Change Password' description='' noIndex={true}>
+<SettingLayout
+  title='Change Password'
+  description=''
+  noIndex={true}
+  initialLoadingMessage={'Loading profile'}
+>
   <SettingSidebar pageUrl='change-password' name='Change Password'>
     <UpdatePasswordForm client:load />
   </SettingSidebar>

src/pages/settings/update-profile.astro

@@ -4,7 +4,11 @@ import { UpdateProfileForm } from '../../components/Setting/UpdateProfileForm';
 import SettingLayout from '../../layouts/SettingLayout.astro';
 ---
 
-<SettingLayout title='Update Profile' noIndex={true}>
+<SettingLayout
+  title='Update Profile'
+  noIndex={true}
+  initialLoadingMessage={'Loading profile'}
+>
   <SettingSidebar pageUrl='profile' name='Profile'>
     <UpdateProfileForm client:load />
   </SettingSidebar>