Use global state user instead of local resource in personal page

src/components/personal.rs

@@ -1,8 +1,8 @@
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
-use crate::auth::get_user;
 use crate::auth::logout;
+use crate::util::state::GlobalState;
 
 #[component]
 pub fn Personal() -> impl IntoView {
@@ -16,8 +16,7 @@ pub fn Personal() -> impl IntoView {
 #[component]
 pub fn Profile() -> impl IntoView {
     let (dropdown_open, set_dropdown_open) = create_signal(false);
-    let (image_error, set_image_error) = create_signal(false);
+	let user = GlobalState::logged_in_user();
-    let user = create_local_resource(move || dropdown_open.get(), |_| async move { get_user().await });
     
 	let open_dropdown = move |_| {
         set_dropdown_open.update(|value| *value = !*value);
@@ -25,45 +24,58 @@ pub fn Profile() -> impl IntoView {
 
     let user_profile_picture = move || {
         user.get().and_then(|user| {
-            user.ok().map(|user| format!("/assets/images/profile/{}.webp", user.id.unwrap()))
+            if let Some(user) = user {
+				if user.id.is_none() {
+					return None;
+				}
+				Some(format!("/assets/images/profile/{}.webp", user.id.unwrap()))
+			} else {
+				None
+			}
         })
     };
 
     view! {
         <div class="profile-container">
             <div class="profile-name">
-                <Show
+                <Suspense
-                    when=move || user.get().map(|user| user.is_ok()).unwrap_or_default()
                     fallback=|| view!{
                         <h1>Not Logged In</h1>
                     }>
-                    <h1>{move || user.get().map(|user| user.map(|user| user.username).unwrap_or_default())}</h1>
+					<Show
+						when=move || user.get().map(|user| user.is_some()).unwrap_or_default()
+						fallback=|| view!{
+							<h1>Not Logged In</h1>
+						}>
+                    	<h1>{move || user.get().map(|user| user.map(|user| user.username))}</h1>
 					</Show>
+                </Suspense>
             </div>
             <div class="profile-icon" on:click=open_dropdown>
+				<Suspense fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }>
 					<Show 
-                    when=move || user.get().map(|user| user.is_ok()).unwrap_or_default()
+						when=move || user.get().map(|user| user.is_some()).unwrap_or_default()
 						fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }
 					>
-                    <Show
+						<object class="profile-image" data={user_profile_picture} type="image/webp">
-                        when=move || !image_error()
+							<Icon class="profile-image" icon=icondata::CgProfile width="45" height="45"/>
-                        fallback=|| view! { <Icon icon=icondata::CgProfile width="45" height="45"/> }
+						</object>
-                    >
-                        <img 
-                            src=user_profile_picture() 
-                            on:error=move |_| set_image_error.set(true)
-                        />
-                    </Show>
 					</Show>
+				</Suspense>
             </div>
             <div class="dropdown-container" style={move || if dropdown_open() {"display: flex"} else {"display: none"}}>
+				<Suspense
+					fallback=|| view!{
+						<DropDownNotLoggedIn />
+					}>
 					<Show
-                    when=move || user.get().map(|user| user.is_ok()).unwrap_or_default()
+						when=move || user.get().map(|user| user.is_some()).unwrap_or_default()
 						fallback=|| view!{
 							<DropDownNotLoggedIn />
 						}>
 						<DropDownLoggedIn />
 					</Show>
+				</Suspense>
             </div>
         </div>
     }
@@ -87,6 +99,8 @@ pub fn DropDownLoggedIn() -> impl IntoView {
             if let Err(err) = result {
                 log!("Error logging out: {:?}", err);
             } else {
+				let user = GlobalState::logged_in_user();
+				user.refetch();
                 log!("Logged out successfully");
             }
         });

style/personal.scss

@@ -34,7 +34,7 @@
       height: 45;
       width: 45;
       margin-left: auto;
-      img {
+      .profile-image {
         width: 100%;
         height: 100%;
         border-radius: 50%;