fix: remove loading animation in inlineloading inactive state (#17814)

* fix: remove loading animation in inlineloading inactive state

* fix: remove loading animation in inlineloading inactive state-

* fix: remove history files

* Revert "fix: remove loading animation in inlineloading inactive state-"

This reverts commit 5e7e769.

* fix: add virtual studio code  .history/* to gitignore

* Update .gitignore

---------

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com>
Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>

Author: 3 people

.gitignore

@@ -36,6 +36,7 @@ pids
 # Editor
 .DS_Store
 *.swp
+.history/*
 .idea
 .vscode
 
@@ -65,4 +66,4 @@ blob-report
 
 # nx local buiild cache
 .nx/cache
-.nx/workspace-data
+.nx/workspace-data

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

@@ -24,8 +24,10 @@ describe('InlineLoading', () => {
 
   it('should render a loader if the status is inactive', () => {
     render(<InlineLoading status="inactive" />);
-
-    expect(screen.getByTitle('not loading')).toBeInTheDocument();
+    expect(
+      // eslint-disable-next-line testing-library/no-node-access
+      document.querySelector('.cds--inline-loading__inactive-status')
+    ).toBeInTheDocument();
   });
 
   it('should render the success state if status is finished', () => {

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

@@ -108,9 +108,9 @@ const InlineLoading = ({
         </CheckmarkFilled>
       );
     }
-    if (status === 'inactive' || status === 'active') {
+    if (status === 'active') {
       if (!iconDescription) {
-        iconLabel = status === 'active' ? 'loading' : 'not loading';
+        iconLabel = 'loading';
       }
       return (
         <Loading
@@ -121,6 +121,16 @@ const InlineLoading = ({
         />
       );
     }
+    if (status === 'inactive') {
+      if (!iconDescription) {
+        iconLabel = 'not loading';
+      }
+      return (
+        <title className={`${prefix}--inline-loading__inactive-status`}>
+          {iconLabel}
+        </title>
+      );
+    }
     return undefined;
   };