[EuiBasicTable] Do not animate loading bar when user prefers reduced motion (#9095)

Author: smith

packages/eui/changelogs/upcoming/9095.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Make `EuiBasicTable` respect user's reduced motion setting by not animating when in loading state.

packages/eui/src/components/basic_table/basic_table.styles.ts

@@ -8,7 +8,12 @@
 
 import { css, keyframes } from '@emotion/react';
 
-import { logicalCSS, euiCantAnimate } from '../../global_styling';
+import {
+  logicalCSS,
+  euiCantAnimate,
+  highContrastModeStyles,
+  preventForcedColors,
+} from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
 const tableLoadingLine = keyframes`
@@ -33,23 +38,40 @@ const tableLoadingLine = keyframes`
   }
 `;
 
-export const euiBasicTableBodyLoading = ({ euiTheme }: UseEuiTheme) => css`
-  position: relative;
-  overflow: hidden;
-
-  &::before {
-    position: absolute;
-    content: '';
-    ${logicalCSS('width', '100%')}
-    ${logicalCSS('height', euiTheme.border.width.thick)}
-    background-color: ${euiTheme.colors.primary};
-    animation: ${tableLoadingLine} 1s linear infinite;
-
-    ${euiCantAnimate} {
-      animation-duration: 2s;
+export const euiBasicTableBodyLoading = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return css`
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      position: absolute;
+      content: '';
+      ${logicalCSS('width', '100%')}
+      ${logicalCSS('height', euiTheme.border.width.thick)}
+      background-color: ${euiTheme.colors.primary};
+      animation: ${tableLoadingLine} 1s linear infinite;
+
+      ${euiCantAnimate} {
+        animation: none;
+        background: repeating-linear-gradient(
+          -45deg,
+          ${euiTheme.colors.backgroundBasePlain},
+          ${euiTheme.colors.backgroundBasePlain} ${euiTheme.size.xs},
+          ${euiTheme.colors.primary} ${euiTheme.size.xs},
+          ${euiTheme.colors.primary} ${euiTheme.size.s}
+        );
+
+        ${highContrastModeStyles(euiThemeContext, {
+          forced: `
+              ${preventForcedColors(euiThemeContext)}
+            `,
+        })}
+      }
     }
-  }
-`;
+  `;
+};
 
 // Fix to make the loading indicator position correctly in Safari
 // For whatever annoying reason, Safari doesn't respect `position: relative;`