fix rendering issue

src/components/pocketbase/Authentication.ts

@@ -20,6 +20,7 @@ export class Authentication {
   private pb: PocketBase;
   private static instance: Authentication;
   private authChangeCallbacks: ((isValid: boolean) => void)[] = [];
+  private isUpdating: boolean = false;
 
   private constructor() {
     // Use the baseUrl from the config file
@@ -27,7 +28,9 @@ export class Authentication {
     
     // Listen for auth state changes
     this.pb.authStore.onChange(() => {
-      this.notifyAuthChange();
+      if (!this.isUpdating) {
+        this.notifyAuthChange();
+      }
     });
   }
 
@@ -109,6 +112,13 @@ export class Authentication {
     this.authChangeCallbacks = this.authChangeCallbacks.filter(cb => cb !== callback);
   }
 
+  /**
+   * Set updating state to prevent auth change notifications during updates
+   */
+  public setUpdating(updating: boolean): void {
+    this.isUpdating = updating;
+  }
+
   /**
    * Notify all subscribers of auth state change
    */

src/components/pocketbase/FileManager.ts

@@ -37,14 +37,18 @@ export class FileManager {
     }
 
     try {
+      this.auth.setUpdating(true);
       const pb = this.auth.getPocketBase();
       const formData = new FormData();
       formData.append(field, file);
 
-      return await pb.collection(collectionName).update<T>(recordId, formData);
+      const result = await pb.collection(collectionName).update<T>(recordId, formData);
+      return result;
     } catch (err) {
       console.error(`Failed to upload file to ${collectionName}:`, err);
       throw err;
+    } finally {
+      this.auth.setUpdating(false);
     }
   }
 
@@ -67,6 +71,7 @@ export class FileManager {
     }
 
     try {
+      this.auth.setUpdating(true);
       const pb = this.auth.getPocketBase();
       const formData = new FormData();
       
@@ -74,10 +79,13 @@ export class FileManager {
         formData.append(field, file);
       });
 
-      return await pb.collection(collectionName).update<T>(recordId, formData);
+      const result = await pb.collection(collectionName).update<T>(recordId, formData);
+      return result;
     } catch (err) {
       console.error(`Failed to upload files to ${collectionName}:`, err);
       throw err;
+    } finally {
+      this.auth.setUpdating(false);
     }
   }
 
@@ -114,12 +122,16 @@ export class FileManager {
     }
 
     try {
+      this.auth.setUpdating(true);
       const pb = this.auth.getPocketBase();
       const data = { [field]: null };
-      return await pb.collection(collectionName).update<T>(recordId, data);
+      const result = await pb.collection(collectionName).update<T>(recordId, data);
+      return result;
     } catch (err) {
       console.error(`Failed to delete file from ${collectionName}:`, err);
       throw err;
+    } finally {
+      this.auth.setUpdating(false);
     }
   }
 
@@ -140,6 +152,7 @@ export class FileManager {
     }
 
     try {
+      this.auth.setUpdating(true);
       const url = this.getFileUrl(collectionName, recordId, filename);
       const response = await fetch(url);
       
@@ -147,10 +160,13 @@ export class FileManager {
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       
-      return await response.blob();
+      const result = await response.blob();
+      return result;
     } catch (err) {
       console.error(`Failed to download file from ${collectionName}:`, err);
       throw err;
+    } finally {
+      this.auth.setUpdating(false);
     }
   }
 } 

src/components/pocketbase/Update.ts

@@ -37,12 +37,16 @@ export class Update {
     }
 
     try {
+      this.auth.setUpdating(true);
       const pb = this.auth.getPocketBase();
       const data = { [field]: value };
-      return await pb.collection(collectionName).update<T>(recordId, data);
+      const result = await pb.collection(collectionName).update<T>(recordId, data);
+      return result;
     } catch (err) {
       console.error(`Failed to update ${field} in ${collectionName}:`, err);
       throw err;
+    } finally {
+      this.auth.setUpdating(false);
     }
   }
 
@@ -63,11 +67,15 @@ export class Update {
     }
 
     try {
+      this.auth.setUpdating(true);
       const pb = this.auth.getPocketBase();
-      return await pb.collection(collectionName).update<T>(recordId, updates);
+      const result = await pb.collection(collectionName).update<T>(recordId, updates);
+      return result;
     } catch (err) {
       console.error(`Failed to update fields in ${collectionName}:`, err);
       throw err;
+    } finally {
+      this.auth.setUpdating(false);
     }
   }
 
@@ -90,6 +98,7 @@ export class Update {
     }
 
     try {
+      this.auth.setUpdating(true);
       const pb = this.auth.getPocketBase();
       const data = { [field]: value };
       
@@ -97,10 +106,13 @@ export class Update {
         pb.collection(collectionName).update<T>(id, data)
       );
       
-      return await Promise.all(updates);
+      const results = await Promise.all(updates);
+      return results;
     } catch (err) {
       console.error(`Failed to batch update ${field} in ${collectionName}:`, err);
       throw err;
+    } finally {
+      this.auth.setUpdating(false);
     }
   }
 
@@ -119,16 +131,20 @@ export class Update {
     }
 
     try {
+      this.auth.setUpdating(true);
       const pb = this.auth.getPocketBase();
       
       const updatePromises = updates.map(({ id, data }) => 
         pb.collection(collectionName).update<T>(id, data)
       );
       
-      return await Promise.all(updatePromises);
+      const results = await Promise.all(updatePromises);
+      return results;
     } catch (err) {
       console.error(`Failed to batch update fields in ${collectionName}:`, err);
       throw err;
+    } finally {
+      this.auth.setUpdating(false);
     }
   }
 }