fix: cancel InlineLoading success timeout on unmount (#18605)

Author: adamalston

packages/react/src/components/InlineLoading/InlineLoading-test.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -87,4 +87,25 @@ describe('InlineLoading', () => {
     expect(onSuccess).toHaveBeenCalled();
     jest.useRealTimers();
   });
+
+  it('should cancel the onSuccess timeout if the component unmounts', () => {
+    jest.useFakeTimers();
+    const onSuccess = jest.fn();
+    const { unmount } = render(
+      <InlineLoading
+        status="finished"
+        onSuccess={onSuccess}
+        successDelay={2500}
+      />
+    );
+
+    // Unmount the component before the timeout fires.
+    unmount();
+
+    // Run all timers. If the cleanup works, `onSuccess` should not be called.
+    jest.runAllTimers();
+    expect(onSuccess).not.toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
 });

packages/react/src/components/InlineLoading/InlineLoading.tsx

@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CheckmarkFilled, ErrorFilled } from '@carbon/icons-react';
@@ -72,6 +72,25 @@ const InlineLoading = ({
 }: InlineLoadingProps) => {
   const prefix = usePrefix();
   const loadingClasses = classNames(`${prefix}--inline-loading`, className);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (status === 'finished') {
+      timerRef.current = setTimeout(() => {
+        if (onSuccess) {
+          onSuccess();
+        }
+      }, successDelay);
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, [status, onSuccess, successDelay]);
+
   const getLoading = () => {
     let iconLabel = iconDescription ? iconDescription : status;
     if (status === 'error') {
@@ -82,11 +101,6 @@ const InlineLoading = ({
       );
     }
     if (status === 'finished') {
-      setTimeout(() => {
-        if (onSuccess) {
-          onSuccess();
-        }
-      }, successDelay);
       return (
         <CheckmarkFilled
           className={`${prefix}--inline-loading__checkmark-container`}>
@@ -109,6 +123,9 @@ const InlineLoading = ({
     }
     return undefined;
   };
+
+  // TODO: Should this element only be constructed, similar to
+  // `loadingAnimation`, if `description` is specified?
   const loadingText = (
     <div className={`${prefix}--inline-loading__text`}>{description}</div>
   );