Implement cache invalidation improvements

src/hooks/useAvatarUpload.ts

@@ -1,6 +1,8 @@
 import { useState, useCallback } from 'react';
 import { supabase } from '@/integrations/supabase/client';
 import { handleError, handleSuccess } from '@/lib/errorHandler';
+import { useQueryInvalidation } from '@/lib/queryInvalidation';
+import { useAuth } from '@/hooks/useAuth';
 
 export type AvatarUploadState = {
   url: string;
@@ -13,6 +15,8 @@ export const useAvatarUpload = (
   initialImageId: string = '',
   username: string
 ) => {
+  const { user } = useAuth();
+  const { invalidateUserProfile } = useQueryInvalidation();
   const [state, setState] = useState<AvatarUploadState>({
     url: initialUrl,
     imageId: initialImageId,
@@ -48,6 +52,11 @@ export const useAvatarUpload = (
       setState(prev => ({ ...prev, isUploading: false }));
       handleSuccess('Avatar updated', 'Your avatar has been successfully updated.');
       
+      // Invalidate user profile cache for instant UI update
+      if (user?.id) {
+        invalidateUserProfile(user.id);
+      }
+      
       return { success: true };
     } catch (error: unknown) {
       // Rollback on error
@@ -64,7 +73,7 @@ export const useAvatarUpload = (
       
       return { success: false, error };
     }
-  }, [username, initialUrl, initialImageId]);
+  }, [username, initialUrl, initialImageId, user?.id, invalidateUserProfile]);
 
   const resetAvatar = useCallback(() => {
     setState({