Description

In DocumentUploadTab, a fake progress setInterval runs during file upload. It is only cleared in onSuccess/onError callbacks. If the user navigates away mid-upload, the interval keeps running and calls setUploadProgress on an unmounted component — a memory leak.

File to change

• surfsense_web/components/sources/DocumentUploadTab.tsx (lines 239-268)

Current code

const handleUpload = async () => {
  setUploadProgress(0);
  const progressInterval = setInterval(() => {
    setUploadProgress((prev) => (prev >= 90 ? prev : prev + Math.random() * 10));
  }, 200);

  uploadDocuments(
    { ... },
    {
      onSuccess: () => { clearInterval(progressInterval); ... },
      onError: () => { clearInterval(progressInterval); ... },
    }
  );
};

What to do

1. Store the interval ID in a ref:

const progressIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);

2. In handleUpload, assign to the ref instead of a local variable.

3. Add a cleanup useEffect:

useEffect(() => {
  return () => {
    if (progressIntervalRef.current) {
      clearInterval(progressIntervalRef.current);
    }
  };
}, []);

Acceptance criteria

• Progress interval is cleared when the component unmounts
• Upload progress still works correctly during normal flow
• No React warnings about setState on unmounted component