Smoothen Loader, add a fade in

vanilladefi · Mar 22, 2022 · 2a22a09 · 2a22a09
1 parent 66031a0
commit 2a22a09
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 30 deletions.
diff --git a/components/Loader/index.tsx b/components/Loader/index.tsx
@@ -3,10 +3,22 @@ import Box from "../Box";
 
 const gradientAnimation = keyframes({
   "0%": {
+    backgroundPosition: "-400% 50%"
+  },
+  "50%": {
     backgroundPosition: "0% 50%"
   },
   "100%": {
-    backgroundPosition: "100% 50%"
+    backgroundPosition: "400% 50%"
+  }
+})
+
+const fadeInAnimation = keyframes({
+  "0%": {
+    opacity: "0"
+  },
+  "100%": {
+    opacity: "1"
   }
 })
 
@@ -18,9 +30,15 @@ const Loader = styled(Box, {
   width: "100%",
   minWidth: "150px",
   minHeight: "1em",
-  background: "linear-gradient(90deg, rgba(241,235,212,0.2), rgba(16,7,15,0.2), rgba(241,235,212,0.2))",
+  opacity: 0,
+  background: "linear-gradient(90deg, rgba(241,235,212,0.1), rgba(16,7,15,0.15), rgba(241,235,212,0.1))",
   backgroundSize: "400% 400%",
-  animation: `${gradientAnimation} 2s linear infinite`
+  animationName: `${gradientAnimation}, ${fadeInAnimation}`,
+  animationDuration: "12s, 1s",
+  animationTimingFunction: "linear, ease",
+  animationIterationCount: "infinite, 1",
+  animationDelay: "0, 400ms",
+  animationFillMode: "forwards"
 })
 
 export default Loader
diff --git a/components/MyStakes/index.tsx b/components/MyStakes/index.tsx
@@ -1,9 +1,9 @@
 import { BigNumber, ethers } from "ethers";
 import Image from "next/image";
+import { CaretDown } from "phosphor-react";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Column, Row } from "react-table";
 import { useSnapshot } from "valtio";
-import { CaretDown } from "phosphor-react";
 import { useGetAssetPairsQuery } from "../../generated/graphql";
 import { Stake, state } from "../../state";
 import { fetchStakes } from "../../state/actions/stakes";
@@ -342,7 +342,7 @@ export const MyStakes = () => {
           </Button>
         )}
       </Flex>
-      {tableData || (!tableData && stakesLoading) ? (
+      {tableData || stakesLoading ? (
         <Box
           css={{
             overflowX: "auto",

diff --git a/state/index.ts b/state/index.ts
@@ -4,16 +4,16 @@ import { subscribeKey } from "valtio/utils";
 import Web3Modal from "web3modal";
 import { defaultEthereumProvider, defaultPolygonProvider } from "../lib/config";
 
-type PrimitiveBalanceTypes = "eth" | "vnl" | "juice" | "matic"
+type PrimitiveBalanceTypes = "eth" | "vnl" | "juice" | "matic";
 type JuicenetBalanceTypes = "unstakedJuice" | "stakedJuice" | "totalJuice";
 
 export type Balances = {
   [key in PrimitiveBalanceTypes | JuicenetBalanceTypes]?: string;
 };
 
 export type RawBalances = {
-  [key in PrimitiveBalanceTypes | JuicenetBalanceTypes]?: BigNumber
-}
+  [key in PrimitiveBalanceTypes | JuicenetBalanceTypes]?: BigNumber;
+};
 
 export enum Sentiment {
   long = "long",
@@ -33,29 +33,28 @@ export type Stake = {
 export type AlertOpts = {
   title: string;
   body?: string | JSX.Element;
-  onConfirm?: () => void | Promise<void>,
-  onCancel?: () => void,
-  confirmDisabled?: boolean,
-  confirmText?: string
-  cancelText?: string
-}
-
+  onConfirm?: () => void | Promise<void>;
+  onCancel?: () => void;
+  confirmDisabled?: boolean;
+  confirmText?: string;
+  cancelText?: string;
+};
 
 type State = {
   ethereumProvider:
-  | providers.JsonRpcProvider
-  | providers.Web3Provider
-  | providers.WebSocketProvider
-  | providers.Provider
-  | providers.BaseProvider
-  | null;
+    | providers.JsonRpcProvider
+    | providers.Web3Provider
+    | providers.WebSocketProvider
+    | providers.Provider
+    | providers.BaseProvider
+    | null;
   polygonProvider:
-  | providers.JsonRpcProvider
-  | providers.Web3Provider
-  | providers.WebSocketProvider
-  | providers.Provider
-  | providers.BaseProvider
-  | null;
+    | providers.JsonRpcProvider
+    | providers.Web3Provider
+    | providers.WebSocketProvider
+    | providers.Provider
+    | providers.BaseProvider
+    | null;
   providerName: string | null;
   signer: Signer | null;
   balances: Balances;
@@ -66,6 +65,7 @@ type State = {
   stakes: Stake[] | null;
   alert: AlertOpts | null;
   walletOpen: boolean;
+  online: boolean;
 };
 
 export const initialState: State = {
@@ -81,15 +81,16 @@ export const initialState: State = {
   alert: null,
   stakes: null,
   walletOpen: false,
+  online: true,
 };
 
 const persistedKeys = {
   walletAddress: "vanilla-walletAddress",
 };
 
 enum VanillaEvents {
-  stakesChanged = 'vanilla-StakesChanged',
-  balancesChanged = 'vanilla-BalancesChanged',
+  stakesChanged = "vanilla-StakesChanged",
+  balancesChanged = "vanilla-BalancesChanged",
 }
 
 const state = proxy<State>(initialState);
@@ -102,5 +103,5 @@ export {
   snapshot,
   ref,
   persistedKeys,
-  VanillaEvents
+  VanillaEvents,
 };