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

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

Co-authored-by: Dominic Nguyen <dom@hichroma.com>
Co-authored-by: Norbert de Langen <ndelangen@me.com>

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/app.stories.js

@@ -1,9 +1,16 @@
 import React from 'react';
+import { styled } from '@storybook/theming';
 import { storiesOf } from '@storybook/react';
 import addons from '@storybook/addons';
 
 import { Root as App, Provider } from './index';
 
+const CustomApp = styled.div({
+  '#preview-loader': {
+    display: 'none',
+  },
+});
+
 class FakeProvider extends Provider {
   constructor() {
     super();
@@ -44,5 +51,9 @@ storiesOf('UI/Layout/App', module)
   .addParameters({
     component: App,
   })
-  .add('default', () => <App provider={new FakeProvider()} />)
+  .add('default', () => (
+    <CustomApp>
+      <App provider={new FakeProvider()} />
+    </CustomApp>
+  ))
   .add('loading state', () => <App provider={new FakeLoadingProvider()} />);

lib/ui/src/components/preview/preview.js

@@ -259,6 +259,7 @@ class Preview extends Component {
       options,
       description,
       baseUrl,
+      withLoader,
     } = this.props;
 
     const toolbarHeight = options.isToolshown ? 40 : 0;
@@ -284,9 +285,11 @@ class Preview extends Component {
 
               return (
                 <>
-                  <Consumer filter={mapper}>
-                    {state => state.loading && <Loader role="progressbar" />}
-                  </Consumer>
+                  {withLoader && (
+                    <Consumer filter={mapper}>
+                      {state => state.loading && <Loader id="preview-loader" role="progressbar" />}
+                    </Consumer>
+                  )}
                   <ActualPreview {...props} />
                 </>
               );
@@ -357,6 +360,7 @@ Preview.propTypes = {
   }).isRequired,
   baseUrl: PropTypes.string,
   docsOnly: PropTypes.bool,
+  withLoader: PropTypes.bool,
 };
 
 Preview.defaultProps = {
@@ -367,6 +371,7 @@ Preview.defaultProps = {
   description: undefined,
   baseUrl: 'iframe.html',
   customCanvas: undefined,
+  withLoader: true,
 };
 
 export { Preview };

lib/ui/src/components/preview/preview.stories.js

@@ -35,6 +35,7 @@ export const previewProps = {
     isToolshown: true,
   },
   actions: {},
+  withLoader: false,
 };
 
 storiesOf('UI/Preview/Preview', module)

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' },
     }