Skip to content

Attachment upload spinner never clears after a successful upload #559

Description

@Kazim-Ali-STE

Description

After successfully uploading a card attachment, the paperclip upload button keeps showing its loading spinner indefinitely. The file has actually been uploaded and appears in the attachment list, but the button itself stays in the "uploading" state until the page is refreshed (which remounts the component and resets state).

Where

apps/web/src/views/card/components/AttachmentUpload.tsx, in uploadFile:

const uploadFile = async (file: File) => {
  setUploading(true);

  try {
    ...
    await invalidateCard(utils, cardPublicId);
    showPopup({
      header: t`Attachment uploaded`,
      message: t`Your file has been uploaded successfully.`,
      icon: "success",
    });
    // setUploading(false) is missing here on the success path
  } catch {
    ...
    setUploading(false); // only reset on failure
  }
};

setUploading(false) is only called in the catch block. On success it's never reset, so the button spins forever until the component remounts (e.g. on page refresh).

Confirmed present in v0.5.5, v0.6.0, and main.

Steps to reproduce

  1. Open a card and click the paperclip icon to upload a file.
  2. Select a file and let it upload successfully.
  3. Observe the paperclip button keeps spinning (isLoading) even though the attachment now appears in the card.
  4. Refresh the page — the spinner is gone (button resets to idle) and the attachment shows normally.

Expected behavior

setUploading(false) should also run after a successful upload (e.g. in a finally block, or right after showPopup in the success path), so the button returns to its idle state immediately.

Suggested fix

const uploadFile = async (file: File) => {
  setUploading(true);

  try {
    ...
    await invalidateCard(utils, cardPublicId);
    showPopup({ ... });
  } catch {
    showPopup({ ... error ... });
  } finally {
    setUploading(false);
  }
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions