feat: optimize marble loading

src/utils/marbleFactory.ts

@@ -84,21 +84,29 @@ export class MarbleFactory {
 
   // Create marble (async image loading)
   public async createMarble(entry: UserEntry): Promise<Marble> {
-    return new Promise((resolve, reject) => {
     if (!entry?.id) {
-        reject(new Error("Invalid user entry"));
-        return;
+      throw new Error("Invalid user entry");
     }
 
     const url = this.getAvatarUrl(entry.id);
     const img = new Image();
+    img.src = url;
+
+    try {
+      await img.decode();
+    } catch (e) {
+      throw new Error(`Failed to load image: ${url}`);
+    }
 
-      img.onload = () => {
     const size = this.calculateMarbleSize();
     const radius = size / 2;
     const wrapper = this.createMarbleWrapper(entry, size, url);
     const physics = this.generateRandomPhysics(radius);
 
+    // Pre-set position to avoid flashing at 0,0
+    wrapper.style.transform = `translate(${physics.x - radius}px, ${physics.y - radius
+      }px)`;
+
     const { massScale, massOffset } = MARBLE_CONFIG.physics;
     const marble: Marble = {
       id: entry.id,
@@ -114,19 +122,12 @@ export class MarbleFactory {
     this.container.appendChild(wrapper);
 
     // Fade in animation
-        setTimeout(() => {
+    requestAnimationFrame(() => {
+      wrapper.style.transition = "opacity 0.5s ease";
       wrapper.style.opacity = "1";
-        }, MARBLE_CONFIG.animation.fadeInDelay);
-
-        resolve(marble);
-      };
-
-      img.onerror = () => {
-        reject(new Error(`Failed to load image: ${url}`));
-      };
-
-      img.src = url;
     });
+
+    return marble;
   }
 
   // Batch create marbles

src/utils/marbleSystem.ts

@@ -235,10 +235,12 @@ export class MarbleSystem {
   }
 
   // Batch add marbles
-  public async addMarbles(entries: UserEntry[]): Promise<Marble[]> {
-    const newMarbles = await this.factory.createMarbles(entries);
-    this.marbles.push(...newMarbles);
-    return newMarbles;
+  public addMarbles(entries: UserEntry[]): void {
+    entries.forEach((entry) => {
+      this.addMarble(entry).catch((err) => {
+        console.warn(`add marble for ${entry.id}:`, err);
+      });
+    });
   }
 
   // Remove marble