feat(ui, components): style the loader with the design-system

lib/components/src/Loader/Loader.tsx

@@ -1,24 +1,37 @@
-import { keyframes, styled } from '@storybook/theming';
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize, opacify } from 'polished';
+import { rotate360 } from '../shared/animation';
 
-const spin = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`;
-
-export const Loader = styled.div(({ theme }) => ({
-  animation: `${spin} 1s linear infinite`,
-  borderRadius: '50%',
-  height: 48,
-  left: 'calc(50% - 24px)',
+const LoaderWrapper = styled.div(({ theme }) => ({
+  borderRadius: '3em',
+  cursor: 'progress',
+  display: 'inline-block',
+  overflow: 'hidden',
   position: 'absolute',
-  top: 'calc(50% - 24px)',
-  width: 48,
+  transition: 'all 200ms ease-out',
+  verticalAlign: 'top',
+  top: '50%',
+  left: '50%',
+  marginTop: -16,
+  marginLeft: -16,
+  height: 32,
+  width: 32,
   zIndex: 4,
-  border: `3px solid ${theme.color.secondary}`,
-  borderTop: '3px solid transparent',
+  borderWidth: 2,
+  borderStyle: 'solid',
+  borderColor: transparentize(0.06, theme.appBorderColor),
+  borderTopColor: opacify(0.07, theme.appBorderColor),
+  animation: `${rotate360} 0.7s linear infinite`,
 }));
+
+export function Loader({ ...props }) {
+  return (
+    <LoaderWrapper
+      aria-label="Content is loading ..."
+      aria-live="polite"
+      role="status"
+      {...props}
+    />
+  );
+}

lib/components/src/shared/animation.ts

@@ -0,0 +1,10 @@
+import { keyframes } from '@storybook/theming';
+
+export const rotate360 = keyframes`
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+`;

lib/ui/src/components/sidebar/SidebarItem.tsx

@@ -104,7 +104,7 @@ export const Item = styled(({ className, children, id }) => (
         }),
   ({ theme, loading }) =>
     loading && {
-      '&& > svg + span': { background: theme.color.medium },
+      '&& > svg + span': { background: theme.appBorderColor },
       '&& > *': theme.animation.inlineGlow,
       '&& > span': { borderColor: 'transparent' },
     }