fix: upload progress animations

isekovanic · isekovanic · commit 878dc6a44d55 · 2026-04-22T02:57:49.000+02:00
diff --git a/package/src/hooks/__tests__/usePendingAttachmentUpload.test.tsx b/package/src/hooks/__tests__/usePendingAttachmentUpload.test.tsx
@@ -0,0 +1,99 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import { StateStore } from 'stream-chat';
+
+import { ChatProvider } from '../../contexts/chatContext/ChatContext';
+import { usePendingAttachmentUpload } from '../usePendingAttachmentUpload';
+
+type UploadManagerState = {
+  uploads: Array<{
+    id: string;
+    uploadProgress?: number;
+  }>;
+};
+
+const createWrapper = (state: StateStore<UploadManagerState>) => {
+  const client = {
+    uploadManager: {
+      state,
+    },
+  };
+
+  return ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>{children}</ChatProvider>
+  );
+};
+
+describe('usePendingAttachmentUpload', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('briefly holds completed upload progress after a ready upload record disappears', () => {
+    const state = new StateStore<UploadManagerState>({ uploads: [] });
+    const { result } = renderHook(() => usePendingAttachmentUpload('upload-id'), {
+      wrapper: createWrapper(state),
+    });
+
+    expect(result.current).toEqual({
+      isUploading: false,
+      uploadProgress: undefined,
+    });
+
+    act(() => {
+      state.partialNext({
+        uploads: [{ id: 'upload-id', uploadProgress: 90 }],
+      });
+    });
+
+    expect(result.current).toEqual({
+      isUploading: true,
+      uploadProgress: 90,
+    });
+
+    act(() => {
+      state.partialNext({ uploads: [] });
+    });
+
+    expect(result.current).toEqual({
+      isUploading: true,
+      uploadProgress: 100,
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(350);
+    });
+
+    expect(result.current).toEqual({
+      isUploading: false,
+      uploadProgress: undefined,
+    });
+  });
+
+  it('does not hold completed progress when an upload record disappears before reaching the ready threshold', () => {
+    const state = new StateStore<UploadManagerState>({ uploads: [] });
+    const { result } = renderHook(() => usePendingAttachmentUpload('upload-id'), {
+      wrapper: createWrapper(state),
+    });
+
+    act(() => {
+      state.partialNext({
+        uploads: [{ id: 'upload-id', uploadProgress: 50 }],
+      });
+    });
+
+    act(() => {
+      state.partialNext({ uploads: [] });
+    });
+
+    expect(result.current).toEqual({
+      isUploading: false,
+      uploadProgress: undefined,
+    });
+  });
+});
diff --git a/package/src/hooks/usePendingAttachmentUpload.ts b/package/src/hooks/usePendingAttachmentUpload.ts
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import type { UploadManagerState } from 'stream-chat';
 
@@ -21,11 +21,28 @@ const idle: PendingAttachmentUpload = {
   uploadProgress: undefined,
 };
 
+const completed: PendingAttachmentUpload = {
+  isUploading: true,
+  uploadProgress: 100,
+};
+
+const COMPLETION_HOLD_MS = 350;
+const COMPLETION_READY_PROGRESS = 90;
+
+const now = () => Date.now();
+
 /**
  * Subscribes to `client.uploadManager` for the pending attachment identified by `localId`.
  */
 export function usePendingAttachmentUpload(localId: string | undefined): PendingAttachmentUpload {
   const { client } = useChatContext();
+  const [, setRenderTick] = useState(0);
+  const completedHoldUntilRef = useRef(0);
+  const holdTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const lastUploadProgressRef = useRef<number | undefined>(undefined);
+  const previousLocalIdRef = useRef<string | undefined>(localId);
+  const wasUploadingRef = useRef(false);
+
   const selector = useCallback(
     (state: UploadManagerState): PendingAttachmentUpload => {
       if (!localId) {
@@ -44,6 +61,71 @@ export function usePendingAttachmentUpload(localId: string | undefined): Pending
   );
 
   const result = useStateStore(localId ? client.uploadManager.state : undefined, selector);
+  const isUploading = result?.isUploading ?? false;
+  const uploadProgress = result?.uploadProgress;
+
+  if (previousLocalIdRef.current !== localId) {
+    previousLocalIdRef.current = localId;
+    completedHoldUntilRef.current = 0;
+    wasUploadingRef.current = false;
+    lastUploadProgressRef.current = undefined;
+  }
+
+  let pendingAttachmentUpload = result ?? idle;
+  if (localId && isUploading) {
+    completedHoldUntilRef.current = 0;
+    wasUploadingRef.current = true;
+    if (typeof uploadProgress === 'number') {
+      lastUploadProgressRef.current = uploadProgress;
+    }
+  } else if (localId && completedHoldUntilRef.current > now()) {
+    pendingAttachmentUpload = completed;
+  } else if (localId) {
+    const shouldStartCompletionHold =
+      wasUploadingRef.current &&
+      typeof lastUploadProgressRef.current === 'number' &&
+      lastUploadProgressRef.current >= COMPLETION_READY_PROGRESS;
+
+    wasUploadingRef.current = false;
+    lastUploadProgressRef.current = undefined;
+
+    if (shouldStartCompletionHold) {
+      completedHoldUntilRef.current = now() + COMPLETION_HOLD_MS;
+      pendingAttachmentUpload = completed;
+    } else {
+      completedHoldUntilRef.current = 0;
+    }
+  } else {
+    completedHoldUntilRef.current = 0;
+    wasUploadingRef.current = false;
+    lastUploadProgressRef.current = undefined;
+  }
+
+  useEffect(() => {
+    if (holdTimeoutRef.current) {
+      clearTimeout(holdTimeoutRef.current);
+      holdTimeoutRef.current = undefined;
+    }
+
+    const holdForMs = completedHoldUntilRef.current - now();
+    if (holdForMs <= 0) {
+      return;
+    }
+
+    holdTimeoutRef.current = setTimeout(() => {
+      holdTimeoutRef.current = undefined;
+      setRenderTick((tick) => tick + 1);
+    }, holdForMs);
+  }, [localId, pendingAttachmentUpload]);
+
+  useEffect(
+    () => () => {
+      if (holdTimeoutRef.current) {
+        clearTimeout(holdTimeoutRef.current);
+      }
+    },
+    [],
+  );
 
-  return result ?? idle;
+  return pendingAttachmentUpload;
 }
diff --git a/package/src/native.ts b/package/src/native.ts
@@ -62,6 +62,13 @@ export type NativeMultipartUploadPart =
     };
 
 export type NativeMultipartUploadProgressConfig = {
+  /**
+   * Maximum progress percentage reported while the native request body is still being sent.
+   * Completion is represented by the upload request resolving and the upload indicator being removed.
+   *
+   * @default 90
+   */
+  completionProgressCap?: number;
   count?: number;
   intervalMs?: number;
 };
diff --git a/package/src/utils/__tests__/installNativeMultipartAdapter.test.ts b/package/src/utils/__tests__/installNativeMultipartAdapter.test.ts
@@ -181,6 +181,112 @@ describe('installNativeMultipartAdapter', () => {
     );
   });
 
+  it('caps native multipart body progress to 90 percent while waiting for the response', async () => {
+    NativeHandlers.multipartUpload = jest.fn().mockImplementation(({ onProgress }) => {
+      onProgress?.({
+        loaded: 100,
+        total: 100,
+      });
+
+      return {
+        body: JSON.stringify({ file: 'https://example.com/file.jpg' }),
+        headers: { 'content-type': 'application/json' },
+        status: 200,
+        statusText: 'OK',
+      };
+    });
+
+    const client = getTestClient();
+    preserveRequestData(client);
+    installNativeMultipartAdapter(client);
+    const onUploadProgress = jest.fn();
+    const formData = {
+      _parts: [
+        [
+          'file',
+          {
+            name: 'test.jpg',
+            type: 'image/jpeg',
+            uri: 'file:///tmp/test.jpg',
+          },
+        ],
+      ],
+    };
+
+    await client.axiosInstance.post('/uploads/image', formData, { onUploadProgress });
+
+    expect(onUploadProgress).toHaveBeenCalledTimes(1);
+    expect(onUploadProgress).toHaveBeenCalledWith(
+      expect.objectContaining({
+        bytes: 90,
+        lengthComputable: true,
+        loaded: 90,
+        progress: 0.9,
+        total: 100,
+      }),
+    );
+  });
+
+  it('allows overriding the native multipart completion progress cap', async () => {
+    NativeHandlers.multipartUpload = jest.fn().mockImplementation(({ onProgress }) => {
+      onProgress?.({
+        loaded: 100,
+        total: 100,
+      });
+
+      return {
+        body: JSON.stringify({ file: 'https://example.com/file.jpg' }),
+        headers: { 'content-type': 'application/json' },
+        status: 200,
+        statusText: 'OK',
+      };
+    });
+
+    const client = getTestClient();
+    preserveRequestData(client);
+    installNativeMultipartAdapter(client);
+    const onUploadProgress = jest.fn();
+    const formData = {
+      _parts: [
+        [
+          'file',
+          {
+            name: 'test.jpg',
+            type: 'image/jpeg',
+            uri: 'file:///tmp/test.jpg',
+          },
+        ],
+      ],
+    };
+
+    await client.axiosInstance.post('/uploads/image', formData, {
+      onUploadProgress,
+      uploadProgressOptions: {
+        completionProgressCap: 75,
+        count: 10,
+        intervalMs: 25,
+      },
+    });
+
+    expect(onUploadProgress).toHaveBeenCalledTimes(1);
+    expect(onUploadProgress).toHaveBeenCalledWith(
+      expect.objectContaining({
+        bytes: 75,
+        loaded: 75,
+        progress: 0.75,
+        total: 100,
+      }),
+    );
+    expect(NativeHandlers.multipartUpload).toHaveBeenCalledWith(
+      expect.objectContaining({
+        progress: {
+          count: 10,
+          intervalMs: 25,
+        },
+      }),
+    );
+  });
+
   it('uses the final config after user request interceptors run', async () => {
     const client = getTestClient();
     preserveRequestData(client);
diff --git a/package/src/utils/installNativeMultipartAdapter.ts b/package/src/utils/installNativeMultipartAdapter.ts
