[Emotion] Convert EuiBasicTable (#6539)

* [tech debt] convert `useEuiTheme` tests to RTL `renderHook`

- which is generally a nicer API than the one I yolo'd

* [tech debt] Add more missing unit tests for `useEuiTheme`

* [tech debt] write basic unit test for `withEuiTheme`

* Add new `RenderWithEuiTheme` render prop util

* Convert `tbody` loading styles to Emotion

- I opted not to create a top-level component for this due to the very limited styles being applied, and due to HOC/theme access shenanigans

* Fix error/empty states not rendering loading styles

- by only rendering one `<tbody>`, not multiple

* Write basic `loading` test
+ switch `render` to RTL

* [extra] Massive clean up of EuiBasicTable unit tests

- switch to RTL totally (shallow was not handling the new render prop well)
- DRY out various repeated props
- stop use snapshots for every single test - use specific assertions instead. For visual rendering for various prop combos, we should use Storybook
- leave snapshots in for two specific render tests - barebones & kitchen sink props

* Delete scss files

* Add `shouldRenderCustomStyles` test

* changelog

* Add affordance for reduced motion media query

- this matches how EuiProgress behaves

+ clean up animation shorthand

* Add CSS workaround/fix for visual Safari bug

- apparently `position: relative` on the parent and not on the `tbody` was a cross-browser fix :(

src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
       </div>
     </div>
     <table
-      class="euiTable euiTable--responsive"
+      class="euiTable css-0 euiTable--responsive"
       id="__table_generated-id"
       tabindex="-1"
     >
@@ -55,7 +55,9 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
           </th>
         </tr>
       </thead>
-      <tbody>
+      <tbody
+        class="css-0"
+      >
         <tr
           class="euiTableRow"
         >
@@ -651,7 +653,7 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
       </div>
     </div>
     <table
-      class="euiTable euiTable--responsive"
+      class="euiTable css-0 euiTable--responsive"
       id="__table_generated-id"
       tabindex="-1"
     >
@@ -684,7 +686,9 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
           </th>
         </tr>
       </thead>
-      <tbody>
+      <tbody
+        class="css-0"
+      >
         <tr
           class="euiTableRow"
         >

src/components/basic_table/basic_table.styles.ts

@@ -6,7 +6,57 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
+
+import { logicalCSS, euiCantAnimate } from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+
+const tableLoadingLine = keyframes`
+  from {
+    ${logicalCSS('left', 0)}
+    ${logicalCSS('width', 0)}
+  }
+
+  20% {
+    ${logicalCSS('left', 0)}
+    ${logicalCSS('width', '40%')}
+  }
+
+  80% {
+    ${logicalCSS('left', '60%')}
+    ${logicalCSS('width', '40%')}
+  }
+
+  100% {
+    ${logicalCSS('left', '100%')}
+    ${logicalCSS('width', 0)}
+  }
+`;
+
+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;
+    }
+  }
+`;
+
+// Fix to make the loading indicator position correctly in Safari
+// For whatever annoying reason, Safari doesn't respect `position: relative;`
+// on `tbody` without `position: relative` on the parent `table`
+export const safariLoadingWorkaround = () => css`
+  position: relative;
+`;
 
 // Unsets the extra height caused by tooltip/popover wrappers around table action buttons
 // Without this, the row height jumps whenever actions are disabled