From c73cc97e44969872f7c0da04cf10ccb0ecab9964 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 9 Jul 2020 13:42:06 +0200
Subject: [PATCH] restore Ocean loader

---
 src/components/atoms/Loader.module.css        | 64 +++++--------------
 src/components/atoms/Loader.tsx               | 10 +--
 .../molecules/Form/FileField/Input.tsx        |  6 +-
 src/components/molecules/SearchBar.tsx        |  4 +-
 .../AssetActions/Compute.stories.tsx          | 18 ++++--
 .../AssetActions/Consume.stories.tsx          | 12 ++--
 .../organisms/AssetActions/Consume.tsx        |  2 +-
 src/components/organisms/ConsumedList.tsx     |  4 +-
 src/components/organisms/JobsList.tsx         |  4 +-
 src/components/organisms/PublishedList.tsx    |  4 +-
 src/global/styles.css                         |  6 +-
 11 files changed, 53 insertions(+), 81 deletions(-)

diff --git a/src/components/atoms/Loader.module.css b/src/components/atoms/Loader.module.css
index 6eb94c418..be55dda04 100644
--- a/src/components/atoms/Loader.module.css
+++ b/src/components/atoms/Loader.module.css
@@ -1,57 +1,27 @@
 .loaderWrap {
-  display: inline-block;
-  font-size: var(--font-size-small);
-  color: var(--brand-grey);
-}
-
-.loader,
-.loader:before,
-.loader:after {
-  background: var(--brand-grey);
-  border-radius: var(--border-radius);
-  animation: load1 0.7s infinite ease-in-out;
-  font-size: var(--font-size-base);
-  width: 0.3em;
-  height: 1em;
-  display: block;
+  display: flex;
+  align-items: center;
 }
 
 .loader {
-  margin: 0.6em auto;
-  position: relative;
-  transform: translateZ(0);
-  animation-delay: -0.16s;
-}
-.loaderHorizontal {
-  composes: loader;
-  display: inline-block;
-  margin: 0 1.5em 0 0.7em;
-  vertical-align: middle;
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid var(--brand-purple);
+  border-top-color: var(--brand-violet);
+  animation: loader 0.6s linear infinite;
 }
 
-.loader:before,
-.loader:after {
-  position: absolute;
-  top: 0;
-  content: '';
+.message {
+  font-size: var(--font-size-small);
+  color: var(--brand-grey-light);
+  display: block;
+  margin-left: calc(var(--spacer) / 4);
 }
 
-.loader:before {
-  left: -0.6em;
-  animation-delay: -0.32s;
-}
-
-.loader:after {
-  left: 0.6em;
-}
-
-@keyframes load1 {
-  0%,
-  80%,
-  100% {
-    transform: scaleY(0.5);
-  }
-  40% {
-    transform: scaleY(1.3);
+@keyframes loader {
+  to {
+    transform: rotate(360deg);
   }
 }
diff --git a/src/components/atoms/Loader.tsx b/src/components/atoms/Loader.tsx
index 6f8fcf32d..2b8c91d34 100644
--- a/src/components/atoms/Loader.tsx
+++ b/src/components/atoms/Loader.tsx
@@ -2,18 +2,14 @@ import React, { ReactElement } from 'react'
 import styles from './Loader.module.css'
 
 export default function Loader({
-  message,
-  isHorizontal
+  message
 }: {
   message?: string
-  isHorizontal?: boolean
 }): ReactElement {
   return (
     <div className={styles.loaderWrap}>
-      <span
-        className={isHorizontal ? styles.loaderHorizontal : styles.loader}
-      />
-      {message || null}
+      <span className={styles.loader} />
+      {message && <span className={styles.message}>{message}</span>}
     </div>
   )
 }
diff --git a/src/components/molecules/Form/FileField/Input.tsx b/src/components/molecules/Form/FileField/Input.tsx
index be3878154..db7d76bc5 100644
--- a/src/components/molecules/Form/FileField/Input.tsx
+++ b/src/components/molecules/Form/FileField/Input.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import isUrl from 'is-url-superb'
 import Loader from '../../../atoms/Loader'
 import Button from '../../../atoms/Button'
@@ -11,12 +11,12 @@ const FileInput = ({
   children,
   i
 }: {
-  children: any
+  children: ReactNode
   i: number
   formData: string[]
   handleButtonClick(e: React.SyntheticEvent, data: string): void
   isLoading: boolean
-}) => (
+}): ReactElement => (
   <>
     {children}
     {formData[i] && (
diff --git a/src/components/molecules/SearchBar.tsx b/src/components/molecules/SearchBar.tsx
index ec6211312..6cc109f9b 100644
--- a/src/components/molecules/SearchBar.tsx
+++ b/src/components/molecules/SearchBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent, FormEvent } from 'react'
+import React, { useState, ChangeEvent, FormEvent, ReactElement } from 'react'
 import { useNavigate } from '@reach/router'
 import styles from './SearchBar.module.css'
 import Loader from '../atoms/Loader'
@@ -15,7 +15,7 @@ export default function SearchBar({
   initialValue?: string
   filters?: boolean
   large?: true
-}) {
+}): ReactElement {
   const navigate = useNavigate()
   const [value, setValue] = useState(initialValue || '')
   const [searchStarted, setSearchStarted] = useState(false)
diff --git a/src/components/organisms/AssetActions/Compute.stories.tsx b/src/components/organisms/AssetActions/Compute.stories.tsx
index 8a317b81b..e3a18d1ba 100644
--- a/src/components/organisms/AssetActions/Compute.stories.tsx
+++ b/src/components/organisms/AssetActions/Compute.stories.tsx
@@ -1,22 +1,26 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Compute from './Compute'
 import ddo from '../../../../tests/unit/__fixtures__/ddo'
 import web3Mock from '../../../../tests/unit/__mocks__/web3'
-import { DDO } from '@oceanprotocol/squid'
-import oceanMock from '../../../tests/unit/__mocks__/ocean-mock'
+import squidMock from '../../../../tests/unit/__mocks__/@oceanprotocol/squid'
 import { context } from '../../../../tests/unit/__mocks__/web3provider'
 
 export default {
-  title: 'Organisms/Consumejob',
+  title: 'Organisms/Consume',
   decorators: [
-    (storyFn: () => React.FC) => (
+    (storyFn: () => React.FC): ReactElement => (
       <div style={{ maxWidth: '40rem', margin: 'auto' }}>{storyFn()}</div>
     )
   ]
 }
 
-export const Default = () => (
+export const Default = (): ReactElement => (
   <context.Provider value={web3Mock}>
-    <Compute ddo={ddo as DDO} ocean={oceanMock as any} balance="1000000" />
+    <Compute
+      did={ddo.id}
+      ocean={squidMock.ocean as any}
+      metadata={ddo.findServiceByType('metadata').attributes as any}
+      balance="1000000"
+    />
   </context.Provider>
 )
diff --git a/src/components/organisms/AssetActions/Consume.stories.tsx b/src/components/organisms/AssetActions/Consume.stories.tsx
index cd55fe418..e75f8bea3 100644
--- a/src/components/organisms/AssetActions/Consume.stories.tsx
+++ b/src/components/organisms/AssetActions/Consume.stories.tsx
@@ -1,21 +1,23 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Consume from './Consume'
 import ddo from '../../../../tests/unit/__fixtures__/ddo'
 import web3Mock from '../../../../tests/unit/__mocks__/web3'
-import { DDO } from '@oceanprotocol/squid'
 import { context } from '../../../../tests/unit/__mocks__/web3provider'
 
 export default {
   title: 'Organisms/Consume',
   decorators: [
-    (storyFn: () => React.FC) => (
+    (storyFn: () => React.FC): ReactElement => (
       <div style={{ maxWidth: '40rem', margin: 'auto' }}>{storyFn()}</div>
     )
   ]
 }
 
-export const PricedAsset = () => (
+export const PricedAsset = (): ReactElement => (
   <context.Provider value={web3Mock}>
-    <Consume ddo={ddo as DDO} />
+    <Consume
+      did={ddo.id}
+      metadata={ddo.findServiceByType('metadata').attributes as any}
+    />
   </context.Provider>
 )
diff --git a/src/components/organisms/AssetActions/Consume.tsx b/src/components/organisms/AssetActions/Consume.tsx
index b50cadd5a..6bae5ed0d 100644
--- a/src/components/organisms/AssetActions/Consume.tsx
+++ b/src/components/organisms/AssetActions/Consume.tsx
@@ -33,7 +33,7 @@ export default function Consume({
     }
 
     return isLoading ? (
-      <Loader message={consumeStepText} isHorizontal />
+      <Loader message={consumeStepText} />
     ) : (
       <Button
         style="primary"
diff --git a/src/components/organisms/ConsumedList.tsx b/src/components/organisms/ConsumedList.tsx
index 499f89010..dd5690c2c 100644
--- a/src/components/organisms/ConsumedList.tsx
+++ b/src/components/organisms/ConsumedList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, ReactElement } from 'react'
 import Loader from '../atoms/Loader'
 import {
   useOcean,
@@ -39,7 +39,7 @@ const consumedColumns = [
   }
 ]
 
-export default function ConsumedList() {
+export default function ConsumedList(): ReactElement {
   const { ocean, status, accountId, account } = useOcean()
   const [consumedList, setConsumedList] = useState<any>([])
   const { getConsumedList } = useSearch()
diff --git a/src/components/organisms/JobsList.tsx b/src/components/organisms/JobsList.tsx
index b048e45ed..52ca50915 100644
--- a/src/components/organisms/JobsList.tsx
+++ b/src/components/organisms/JobsList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, ReactElement } from 'react'
 import Loader from '../atoms/Loader'
 import {
   useOcean,
@@ -68,7 +68,7 @@ const columns = [
   }
 ]
 
-export default function JobsList() {
+export default function JobsList(): ReactElement {
   const { ocean, status, accountId } = useOcean()
 
   const [jobList, setJobList] = useState<any[]>([])
diff --git a/src/components/organisms/PublishedList.tsx b/src/components/organisms/PublishedList.tsx
index f2298d24d..e6084857b 100644
--- a/src/components/organisms/PublishedList.tsx
+++ b/src/components/organisms/PublishedList.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, ReactElement } from 'react'
 import Loader from '../atoms/Loader'
 import { MetaDataMain } from '@oceanprotocol/squid'
 import {
@@ -39,7 +39,7 @@ const publishedColumns = [
   }
 ]
 
-export default function PublishedList() {
+export default function PublishedList(): ReactElement {
   const { ocean, status, account, accountId } = useOcean()
   const { getPublishedList } = useSearch()
   const [publishedList, setPublishedList] = useState<any[]>([])
diff --git a/src/global/styles.css b/src/global/styles.css
index aba9e86e5..fe3f60e9f 100644
--- a/src/global/styles.css
+++ b/src/global/styles.css
@@ -14,14 +14,14 @@ body {
 
 html {
   font-size: var(--font-size-root);
-  scroll-behavior: smooth;
+  /* scroll-behavior: smooth; */
 }
 
-@media screen and (prefers-reduced-motion: reduce) {
+/* @media screen and (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;
   }
-}
+} */
 
 body {
   color: var(--brand-grey);