restore Ocean loader

src/components/atoms/Loader.module.css

@@ -1,57 +1,27 @@
 .loaderWrap {
-  display: inline-block;
+  display: flex;
-  font-size: var(--font-size-small);
+  align-items: center;
-  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;
 }
 
 .loader {
-  margin: 0.6em auto;
+  display: block;
-  position: relative;
+  width: 20px;
-  transform: translateZ(0);
+  height: 20px;
-  animation-delay: -0.16s;
+  border-radius: 50%;
-}
+  border: 2px solid var(--brand-purple);
-.loaderHorizontal {
+  border-top-color: var(--brand-violet);
-  composes: loader;
+  animation: loader 0.6s linear infinite;
-  display: inline-block;
-  margin: 0 1.5em 0 0.7em;
-  vertical-align: middle;
 }
 
-.loader:before,
+.message {
-.loader:after {
+  font-size: var(--font-size-small);
-  position: absolute;
+  color: var(--brand-grey-light);
-  top: 0;
+  display: block;
-  content: '';
+  margin-left: calc(var(--spacer) / 4);
 }
 
-.loader:before {
+@keyframes loader {
-  left: -0.6em;
+  to {
-  animation-delay: -0.32s;
+    transform: rotate(360deg);
-}
-
-.loader:after {
-  left: 0.6em;
-}
-
-@keyframes load1 {
-  0%,
-  80%,
-  100% {
-    transform: scaleY(0.5);
-  }
-  40% {
-    transform: scaleY(1.3);
   }
 }

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,
+  message
-  isHorizontal
 }: {
   message?: string
-  isHorizontal?: boolean
 }): ReactElement {
   return (
     <div className={styles.loaderWrap}>
-      <span
+      <span className={styles.loader} />
-        className={isHorizontal ? styles.loaderHorizontal : styles.loader}
+      {message && <span className={styles.message}>{message}</span>}
-      />
-      {message || null}
     </div>
   )
 }

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] && (

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)

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 squidMock from '../../../../tests/unit/__mocks__/@oceanprotocol/squid'
-import oceanMock from '../../../tests/unit/__mocks__/ocean-mock'
 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>
 )

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>
 )

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"

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()

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[]>([])

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[]>([])

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);