From 2ce7cfabc68dae51f962f31ba08f9f810c249463 Mon Sep 17 00:00:00 2001
From: JaniAnttonen <jani.anttonen@protonmail.ch>
Date: Fri, 4 Mar 2022 16:35:38 +0200
Subject: [PATCH] Smoothen Loader, add a fade in

---
 components/Loader/index.tsx   | 24 ++++++++++++++---
 components/MyStakes/index.tsx |  4 +--
 state/index.ts                | 51 ++++++++++++++++++-----------------
 3 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/components/Loader/index.tsx b/components/Loader/index.tsx
index 4bfba2e..1992c28 100644
--- 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
index 791bc93..37dead5 100644
--- a/components/MyStakes/index.tsx
+++ b/components/MyStakes/index.tsx
@@ -1,9 +1,9 @@
 import { 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";
@@ -320,7 +320,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
index af75b11..3d6398e 100644
--- a/state/index.ts
+++ b/state/index.ts
@@ -4,7 +4,7 @@ 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 = {
@@ -12,8 +12,8 @@ export type Balances = {
 };
 
 export type RawBalances = {
-  [key in PrimitiveBalanceTypes | JuicenetBalanceTypes]?: BigNumber
-}
+  [key in PrimitiveBalanceTypes | JuicenetBalanceTypes]?: BigNumber;
+};
 
 export enum Sentiment {
   long = "long",
@@ -32,29 +32,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;
@@ -65,6 +64,7 @@ type State = {
   stakes: Stake[] | null;
   alert: AlertOpts | null;
   walletOpen: boolean;
+  online: boolean;
 };
 
 export const initialState: State = {
@@ -80,6 +80,7 @@ export const initialState: State = {
   alert: null,
   stakes: null,
   walletOpen: false,
+  online: true,
 };
 
 const persistedKeys = {
@@ -87,8 +88,8 @@ const persistedKeys = {
 };
 
 enum VanillaEvents {
-  stakesChanged = 'vanilla-StakesChanged',
-  balancesChanged = 'vanilla-BalancesChanged',
+  stakesChanged = "vanilla-StakesChanged",
+  balancesChanged = "vanilla-BalancesChanged",
 }
 
 const state = proxy<State>(initialState);
@@ -101,5 +102,5 @@ export {
   snapshot,
   ref,
   persistedKeys,
-  VanillaEvents
+  VanillaEvents,
 };