Add spinning loader (#23)

src/ensembl/src/shared/loader/Loader.scss

+@import 'src/styles/common';
+
+.circleLoader {
+  display: inline-block;
+  border: 3px solid $ens-light-grey;
+  border-top-color: $ens-red;
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  animation: loader-spin 1.3s linear infinite;
+}
+
+@keyframes loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

src/ensembl/src/shared/loader/Loader.tsx

+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './Loader.scss';
+
+type Props = {
+  className?: string;
+};
+
+export const CircleLoader = (props: Props) => {
+  const className = classNames(styles.circleLoader, props.className);
+
+  return <div className={className} />;
+};

src/ensembl/src/styles/_settings.scss

@@ -106,9 +106,13 @@ $ens-blue: #33adff; // blue on black
 $ens-dark-blue: #0099ff; // blue on white
 
 $ens-light-grey: #f1f2f4;
+$ens-medium-light-grey: #d4d9de;
 $ens-grey: #b7c0c8;
+$ens-medium-dark-grey: #9aa7b1;
 $ens-dark-grey: #6f8190;
 
+$ens-red: #d90000;
+
 $ens-white: #fff;
 
 /* stylelint-disable */
@@ -117,8 +121,11 @@ $ens-white: #fff;
   ens-blue: $ens-blue;
   ens-light-blue: $ens-light-blue;
   ens-dark-blue: $ens-dark-blue;
+  ens-red: $ens-red;
   ens-dark-grey: $ens-dark-grey;
+  ens-medium-dark-grey: $ens-medium-dark-grey;
   ens-grey: $ens-grey;
+  ens-medium-light-grey: $ens-medium-light-grey;
   ens-light-grey: $ens-light-grey;
   ens-white: $ens-white;
 }

src/ensembl/stories/design-primitives/colours/Colours.stories.tsx

@@ -25,16 +25,31 @@ const colours = [
     variableName: '$ens-light-blue',
     value: variables['ens-light-blue']
   },
+  {
+    name: 'Ensembl red',
+    variableName: '$ens-red',
+    value: variables['ens-red']
+  },
   {
     name: 'Ensembl grey',
     variableName: '$ens-grey',
     value: variables['ens-grey']
   },
+  {
+    name: 'Ensembl medium dark grey',
+    variableName: '$ens-medium-dark-grey',
+    value: variables['ens-medium-dark-grey']
+  },
   {
     name: 'Ensembl dark grey',
     variableName: '$ens-dark-grey',
     value: variables['ens-dark-grey']
   },
+  {
+    name: 'Ensembl medium light grey',
+    variableName: '$ens-medium-light-grey',
+    value: variables['ens-medium-light-grey']
+  },
   {
     name: 'Ensembl light grey',
     variableName: '$ens-light-grey',
@@ -51,8 +66,8 @@ storiesOf('Design Primitives|Colours', module).add(
   'colour palette',
   () => (
     <>
-      {colours.map((colourData) => (
-        <ColourCard {...colourData} />
+      {colours.map((colourData, index) => (
+        <ColourCard key={index} {...colourData} />
       ))}
     </>
   ),

src/ensembl/stories/shared-components/index.ts

@@ -4,3 +4,4 @@ import './dropdown/Dropdown.stories';
 import './input/Input.stories';
 import './search-field/SearchField.stories';
 import './autosuggest-search-field/AutosuggestSearchField.stories';
+import './loader/Loader.stories';

src/ensembl/stories/shared-components/loader/Loader.stories.scss

+.fullPageWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}

src/ensembl/stories/shared-components/loader/Loader.stories.tsx

+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import { CircleLoader } from 'src/shared/loader/Loader';
+
+import styles from './Loader.stories.scss';
+
+storiesOf('Components|Shared Components/Loader', module).add(
+  'full-page',
+  () => (
+    <div className={styles.fullPageWrapper}>
+      <CircleLoader />
+    </div>
+  )
+);

src/ensembl/stories/shared-components/search-field/SearchField.stories.scss

+@import 'src/styles/common';
+
 .searchFieldWrapper {
   padding: 40px;
 }
@@ -7,3 +9,11 @@
   width: 300px;
   align-items: center;
 }
+
+.circleLoader {
+  height: 20px;
+  width: 20px;
+  border-width: 1px;
+  border-color: $ens-medium-light-grey;
+  border-top-color: $ens-red;
+}

src/ensembl/stories/shared-components/search-field/SearchField.stories.tsx

@@ -4,6 +4,7 @@ import { action } from '@storybook/addon-actions';
 
 import SearchField from 'src/shared/search-field/SearchField';
 import QuestionButton from 'src/shared/question-button/QuestionButton';
+import { CircleLoader } from 'src/shared/loader/Loader';
 
 import styles from './SearchField.stories.scss';
 
@@ -18,13 +19,18 @@ const Wrapper = (props: any) => {
   );
 };
 
-storiesOf('Components|Shared Components/SearchField', module).add(
-  'default',
-  () => (
+storiesOf('Components|Shared Components/SearchField', module)
+  .add('default', () => (
     <Wrapper
       searchField={SearchField}
       className={styles.searchField}
       rightCorner={<QuestionButton onHover={action('question-button-hover')} />}
     />
-  )
-);
+  ))
+  .add('with loader', () => (
+    <Wrapper
+      searchField={SearchField}
+      className={styles.searchField}
+      rightCorner={<CircleLoader className={styles.circleLoader} />}
+    />
+  ));