Loading improvements (#80)

* add WrapperCenter for loadings * add cowloading svg + animations * add ids to svg + animations * add end of line to svg file * fix keyframe styles * change names and ids to camelCase * change id to class * move class to path instead of g tag * remove classes and use child selectors * remove classes from svg * svg animations for production * add CowLoading component on storybook * replace Spinner -> CowLoading * clean code * upgrade react-inlinesvg lib * clean CoWLoading svg * change svg without react-inlinesvg and fix storybook * use react-inlinesvg * center animation - restore spinner on tables * fix svg classes * remove spinner import * delete Cow example * center cow on BV * Adding CowLoading on Orders tab Co-authored-by: Ramiro Vazquez <[email protected]> Co-authored-by: Henry Palacios <[email protected]>
cowprotocol · May 4, 2022 · 2f7ee66 · 2f7ee66
1 parent 8ca4258
commit 2f7ee66
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -99,7 +99,7 @@
     "react-ga": "^3.3.0",
     "react-hook-form": "6.9.2",
     "react-hot-loader": "^4.12.19",
-    "react-inlinesvg": "^2.2.2",
+    "react-inlinesvg": "^3.0.0",
     "react-router-dom": "^5.1.2",
     "react-select": "^3.0.8",
     "react-toastify": "^5.5.0",

diff --git a/src/apps/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx b/src/apps/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx
@@ -6,7 +6,7 @@ import { OrdersTableContext } from './context/OrdersTableContext'
 import useFirstRender from 'hooks/useFirstRender'
 import { DEFAULT_TIMEOUT } from 'const'
 import { useSearchInAnotherNetwork, EmptyOrdersMessage } from './useSearchInAnotherNetwork'
-import Spinner from 'components/common/Spinner'
+import CowLoading from 'components/common/CowLoading'
 
 export const OrdersTableWithData: React.FC = () => {
   const {
@@ -42,7 +42,7 @@ export const OrdersTableWithData: React.FC = () => {
 
   return isFirstRender || isFirstLoading ? (
     <EmptyItemWrapper>
-      <Spinner spin size="3x" />
+      <CowLoading />
     </EmptyItemWrapper>
   ) : (
     <OrdersTable

diff --git a/src/apps/explorer/components/TransactionsTableWidget/TransactionsTableWithData.tsx b/src/apps/explorer/components/TransactionsTableWidget/TransactionsTableWithData.tsx
@@ -2,10 +2,10 @@ import React, { useContext, useState, useEffect } from 'react'
 
 import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable'
 import useFirstRender from 'hooks/useFirstRender'
-import Spinner from 'components/common/Spinner'
 import { TransactionsTableContext } from 'apps/explorer/components/TransactionsTableWidget/context/TransactionsTableContext'
 import TransactionTable from 'components/transaction/TransactionTable'
 import { DEFAULT_TIMEOUT } from 'const'
+import CowLoading from 'components/common/CowLoading'
 
 export const TransactionsTableWithData: React.FC = () => {
   const {
@@ -36,7 +36,7 @@ export const TransactionsTableWithData: React.FC = () => {
 
   return isFirstRender || isFirstLoading ? (
     <EmptyItemWrapper>
-      <Spinner spin size="3x" />
+      <CowLoading />
     </EmptyItemWrapper>
   ) : (
     <TransactionTable orders={orders} />

diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx
@@ -6,7 +6,6 @@ import { useQuery } from 'hooks/useQuery'
 import { BlockchainNetwork, TransactionsTableContext } from './context/TransactionsTableContext'
 import { useGetTxOrders, useTxOrderExplorerLink } from 'hooks/useGetOrders'
 import RedirectToSearch from 'components/RedirectToSearch'
-import Spinner from 'components/common/Spinner'
 import { RedirectToNetwork, useNetworkId } from 'state/network'
 import { Order } from 'api/operator'
 import { TransactionsTableWithData } from 'apps/explorer/components/TransactionsTableWidget/TransactionsTableWithData'
@@ -18,6 +17,7 @@ import { ConnectionStatus } from 'components/ConnectionStatus'
 import { Notification } from 'components/Notification'
 import { useTxBatchTrades, GetTxBatchTradesResult } from 'hooks/useTxBatchTrades'
 import TransactionBatchGraph from 'apps/explorer/components/TransanctionBatchGraph'
+import CowLoading from 'components/common/CowLoading'
 
 interface Props {
   txHash: string
@@ -94,7 +94,7 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
   }
 
   if (!orders?.length) {
-    return <Spinner spin size="3x" />
+    return <CowLoading />
   }
 
   return (

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -11,7 +11,6 @@ import CytoscapeComponent from 'react-cytoscapejs'
 import styled, { useTheme } from 'styled-components'
 import BigNumber from 'bignumber.js'
 
-import Spinner from 'components/common/Spinner'
 import { GetTxBatchTradesResult as TxBatchData, Settlement as TxSettlement } from 'hooks/useTxBatchTrades'
 import { networkOptions } from 'components/NetworkSelector'
 import { Network } from 'types'
@@ -22,7 +21,10 @@ import { APP_NAME } from 'const'
 import { HEIGHT_HEADER_FOOTER, TOKEN_SYMBOL_UNKNOWN } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
 import { abbreviateString, FormatAmountPrecision, formattingAmountPrecision } from 'utils'
+
+import CowLoading from 'components/common/CowLoading'
 import { media } from 'theme/styles/media'
+import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable'
 
 Cytoscape.use(popper)
 const PROTOCOL_NAME = APP_NAME
@@ -242,7 +244,12 @@ function TransanctionBatchGraph({
     })
   }, [cytoscapeRef, elements.length])
 
-  if (isLoading) return <Spinner spin size="3x" />
+  if (isLoading)
+    return (
+      <EmptyItemWrapper>
+        <CowLoading />
+      </EmptyItemWrapper>
+    )
 
   return (
     <WrapperCytoscape

diff --git a/src/apps/explorer/pages/UserDetails.tsx b/src/apps/explorer/pages/UserDetails.tsx
@@ -7,8 +7,8 @@ import { useNetworkId } from 'state/network'
 import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import RedirectToSearch from 'components/RedirectToSearch'
 import { useResolveEns } from 'hooks/useResolveEns'
-import Spinner from 'components/common/Spinner'
 import { TitleAddress, Wrapper as WrapperMod, FlexContainerVar } from 'apps/explorer/pages/styled'
+import CowLoading from 'components/common/CowLoading'
 
 const Wrapper = styled(WrapperMod)`
   > h1 {
@@ -47,7 +47,7 @@ const UserDetails: React.FC = () => {
           <OrdersTableWidget ownerAddress={addressAccount.address} networkId={networkId} />
         </>
       ) : (
-        <Spinner size="3x" />
+        <CowLoading />
       )}
     </Wrapper>
   )

diff --git a/src/apps/explorer/pages/styled.tsx b/src/apps/explorer/pages/styled.tsx
@@ -27,6 +27,17 @@ export const Wrapper = styled.div`
   }
 `
 
+export const WrapperCenter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+`
+
+export const StyledTabLoader = styled.span`
+  padding-left: 4px;
+`
+
 export const FlexContainer = styled.div`
   display: flex;
   align-items: center;

diff --git a/src/assets/img/cowLoading.svg b/src/assets/img/cowLoading.svg
diff --git a/src/components/common/CowLoading.stories.tsx b/src/components/common/CowLoading.stories.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Story, Meta } from '@storybook/react/types-6-0'
+import { GlobalStyles, ThemeToggler } from 'storybook/decorators'
+import CowLoading from './CowLoading'
+
+export default {
+  title: 'Common/CowLoading',
+  component: CowLoading,
+  decorators: [GlobalStyles, ThemeToggler],
+} as Meta
+
+const Template: Story = () => <CowLoading />
+
+export const Default = Template.bind({})
diff --git a/src/components/common/CowLoading.tsx b/src/components/common/CowLoading.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import styled, { keyframes } from 'styled-components'
+import SVG from 'react-inlinesvg'
+import CowLoadingSVG from 'assets/img/cowLoading.svg'
+
+export const WrapperCenter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+`
+
+const CowBounce = keyframes`
+  0%,
+  100% {
+    transform: scale(0.95) translateX(1px);
+  }
+  50% {
+    transform: scale(1);
+  }
+`
+
+const EyesOpacity = keyframes`
+  from {
+    opacity: 1;
+  }
+  30% {
+    opacity: 0.3;
+  }
+  to {
+    opacity: 1;
+  }
+`
+
+export const StyledCowLoading = styled(SVG)`
+  .cowLoading {
+    animation: ${CowBounce} 1.5s infinite ease-in-out;
+    animation-delay: -1s;
+  }
+  .cowHead {
+    fill: ${({ theme }): string => theme.white};
+    opacity: 0.4;
+  }
+  .eyesBg {
+    fill: ${({ theme }): string => theme.bg1};
+    opacity: 1;
+  }
+  .eyes {
+    fill: ${({ theme }): string => theme.orange};
+    animation: ${EyesOpacity} 1.5s ease-in-out infinite;
+    filter: blur(1px);
+  }
+`
+
+export const CowLoading: React.FC = () => (
+  <WrapperCenter>
+    <StyledCowLoading src={CowLoadingSVG} />
+  </WrapperCenter>
+)
+
+export default CowLoading
diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx
@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-
 import { Order, Trade } from 'api/operator'
 
 import { DetailsTable } from 'components/orders/DetailsTable'
@@ -12,6 +9,7 @@ import RedirectToSearch from 'components/RedirectToSearch'
 import { Notification } from 'components/Notification'
 import { Errors } from 'types'
 import { ConnectionStatus } from 'components/ConnectionStatus'
+import CowLoading from 'components/common/CowLoading'
 
 const TitleUid = styled(RowWithCopyButton)`
   color: ${({ theme }): string => theme.grey};
@@ -70,7 +68,7 @@ export const OrderDetails: React.FC<Props> = (props) => {
       {/* TODO: add fills tab for partiallyFillable orders */}
       {!isOrderLoading && order && !areTokensLoaded && <p>Not able to load tokens</p>}
       {/* TODO: create common loading indicator */}
-      {isLoadingForTheFirstTime && <FontAwesomeIcon icon={faSpinner} spin size="3x" />}
+      {isLoadingForTheFirstTime && <CowLoading />}
     </>
   )
 }
diff --git a/yarn.lock b/yarn.lock
@@ -16873,10 +16873,10 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-from-dom@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.1.tgz#6740f5a3d79e0c354703e5c096b8fdfe0db71b0f"
-  integrity sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg==
+react-from-dom@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.2.tgz#9da903a508c91c013b55afcd59348b8b0a39bdb4"
+  integrity sha512-qvWWTL/4xw4k/Dywd41RBpLQUSq97csuv15qrxN+izNeLYlD9wn5W8LspbfYe5CWbaSdkZ72BsaYBPQf2x4VbQ==
 
 react-ga@^3.3.0:
   version "3.3.0"
@@ -16913,13 +16913,13 @@ react-hot-loader@^4.12.19:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-inlinesvg@^2.2.2:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz#62283c0ce7e9d11d8190ec3e89589102288830fd"
-  integrity sha512-fEGOdDf4k4bcveArbEpj01pJcH8pOCKLxmSj2POFdGvEk5YK0NZVnH6BXpW/PzACHPRsuh1YKAhNZyFnD28oxg==
+react-inlinesvg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-3.0.0.tgz#801c6bac1535334586708cd346f4b1125dcfa8f9"
+  integrity sha512-zUt0DW3cKBk+vYZJJCzJqA9STRb+ZFmKLQFWurTvM4UR6vyHT8kHZSzyZZseX9BUNbTFJAfirtwpt97BWDJoSg==
   dependencies:
     exenv "^1.2.2"
-    react-from-dom "^0.6.0"
+    react-from-dom "^0.6.2"
 
 react-input-autosize@^3.0.0:
   version "3.0.0"