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,
 };