refactor: improve token fetch experience and refactor spinners

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/components/profile/edit-profile.dialog.view.tsx

@@ -1,6 +1,5 @@
 import type { ServiceUserUserInfoData } from '@/client';
 import { useForm } from '@tanstack/react-form';
-import { Loader2 } from 'lucide-react';
 import {
   useEffect,
   useState,
@@ -25,6 +24,7 @@ import {
 import {
   Input,
 } from '@/components/ui/input';
+import { Spinner } from '../ui/spinner';
 import { Switch } from '../ui/switch';
 
 const formSchema = z.object({
@@ -168,7 +168,7 @@ export function EditProfileDialogView({ user, updateProfile }: { user: ServiceUs
               selector={state => [state.canSubmit, state.isSubmitting]}
               children={([canSubmit, isSubmitting]) => (
                 <Button type="submit" disabled={!canSubmit}>
-                  {isSubmitting ? <Loader2 className="animate-spin" /> : '保存'}
+                  {isSubmitting ? <Spinner /> : '保存'}
                 </Button>
               )}
             />

client/cms/src/components/profile/profile.view.tsx

@@ -6,13 +6,14 @@ import {
   isEmpty,
   isNil,
 } from 'lodash-es';
-import { Loader2, Mail, Pencil } from 'lucide-react';
+import { Mail, Pencil } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import Markdown from 'react-markdown';
 import { toast } from 'sonner';
 import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { base64ToUtf8 } from '@/lib/utils';
 import { Button } from '../ui/button';
+import { Spinner } from '../ui/spinner';
 import { EditProfileDialogContainer } from './edit-profile.dialog.container';
 
 export function ProfileView({ user, onSaveBio }: { user: ServiceUserUserInfoData; onSaveBio: (bio: string) => Promise<void> }) {
@@ -54,12 +55,12 @@ export function ProfileView({ user, onSaveBio }: { user: ServiceUserUserInfoData
         {/* Bio */}
         {enableBioEdit
           ? (
-              <MDEditor
-                value={bio}
-                onChange={setBio}
-                height="100%"
-              />
-            )
+            <MDEditor
+              value={bio}
+              onChange={setBio}
+              height="100%"
+            />
+          )
           : <div className="p-6 prose dark:prose-invert"><Markdown>{bio}</Markdown></div>}
         <Button
           className="absolute bottom-4 right-4"
@@ -89,7 +90,7 @@ export function ProfileView({ user, onSaveBio }: { user: ServiceUserUserInfoData
           variant={enableBioEdit ? 'default' : 'outline'}
           disabled={isSubmittingBio}
         >
-          {isSubmittingBio ? <Loader2 className="animate-spin" /> : <Pencil />}
+          {isSubmittingBio ? <Spinner /> : <Pencil />}
         </Button>
       </section>
     </div>