Delayed loaders, offline/online status listeners

components/Loader/index.tsx

@@ -1,12 +1,25 @@
+import { useEffect, useState } from "react";
 import { keyframes, styled } from "../../stitches.config";
 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 +31,28 @@ 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",
+  animationFillMode: "forwards"
 })
 
+export const LoaderWithDelay = () => {
+  const delay = 200;
+  const [show, setVisibility] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setVisibility(true), delay);
+    return () => {
+      clearTimeout(timer);
+    };
+  });
+
+  return show ? <Loader /> : null;
+};
+
 export default Loader

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",

components/Table/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/jsx-key */
+import { AnimatePresence, motion } from "framer-motion";
 import { matchSorter } from "match-sorter";
 import { ArrowDown, ArrowUp } from "phosphor-react";
 import React, { useCallback, useEffect, useState } from "react";
@@ -9,13 +10,12 @@ import {
   useExpanded,
   useGlobalFilter,
   useSortBy,
-  useTable,
+  useTable
 } from "react-table";
-import { motion, AnimatePresence } from "framer-motion";
 import { styled } from "../../stitches.config";
 import Box from "../Box";
 import Flex from "../Flex";
-import Loader from "../Loader";
+import { LoaderWithDelay } from "../Loader";
 
 /**
  * There's some boilter plate here
@@ -275,7 +275,7 @@ function Table<T extends object>({
               {headerGroups[headerGroups.length - 1].headers.map((_column) => {
                 return (
                   <td key={_column.id}>
-                    <Loader />
+                    <LoaderWithDelay />
                   </td>
                 );
               })}

components/Wallet/ActiveWallet.tsx

@@ -2,23 +2,23 @@ import type * as Stitches from "@stitches/react";
 import { isAddress, juiceDecimals } from "@vanilladefi/core-sdk";
 import { getJuiceStakingContract } from "@vanilladefi/stake-sdk";
 import { ContractTransaction } from "ethers";
-import Link from "../Link";
-import { Copy, ArrowUp, ArrowDown, XCircle } from "phosphor-react";
-import { useCallback, useState, useRef, useEffect } from "react";
-import { toast } from "react-toastify";
+import { formatUnits } from "ethers/lib/utils";
+import { ArrowDown, ArrowUp, Copy, XCircle } from "phosphor-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import CountUp from "react-countup";
+import { toast } from "react-toastify";
+import { PolygonScanIcon } from "../../assets";
 import { state, useSnapshot, VanillaEvents } from "../../state";
 import { connectWallet, disconnect } from "../../state/actions/wallet";
 import { emitEvent, getTransactionLink, parseJuice } from "../../utils/helpers";
 import Box from "../Box";
 import Button from "../Button";
 import Input from "../Input";
-import Loader from "../Loader";
+import Link from "../Link";
+import { LoaderWithDelay } from "../Loader";
 import Text from "../Text";
 import Curtain from "./Curtain";
 
-import { PolygonScanIcon } from "../../assets";
-import { formatUnits } from "ethers/lib/utils";
 
 enum TxTypes {
   deposit,
@@ -420,7 +420,7 @@ const ActiveWallet: React.FC<{ css?: Stitches.CSS }> = ({ css }) => {
                     </Text>
                   </>
                 ) : (
-                  <Loader />
+                  <LoaderWithDelay />
                 )}
               </Box>
               <Box
@@ -439,7 +439,7 @@ const ActiveWallet: React.FC<{ css?: Stitches.CSS }> = ({ css }) => {
                     </Text>
                   </>
                 ) : (
-                  <Loader />
+                  <LoaderWithDelay />
                 )}
               </Box>
             </Box>
@@ -492,7 +492,7 @@ const ActiveWallet: React.FC<{ css?: Stitches.CSS }> = ({ css }) => {
                   <Text muted>In your wallet</Text>
                 </>
               ) : (
-                <Loader />
+                <LoaderWithDelay />
               )}
             </Box>
           </Box>
@@ -719,7 +719,7 @@ const ActiveWallet: React.FC<{ css?: Stitches.CSS }> = ({ css }) => {
                   <Text muted>Unstaked in Juicenet</Text>
                 </>
               ) : (
-                <Loader />
+                <LoaderWithDelay />
               )}
             </Box>
             {rawBalances.unstakedJuice?.isZero() &&

components/Wallet/index.tsx

@@ -2,10 +2,10 @@ import type * as Stitches from "@stitches/react";
 import { state, useSnapshot } from "../../state";
 import { connectWallet } from "../../state/actions/wallet";
 import Box from "../Box";
-import Loader from "../Loader";
+import { LoaderWithDelay } from "../Loader";
 
 const WalletButton: React.FC<{ css?: Stitches.CSS }> = ({ css }) => {
-  const { walletAddress, truncatedWalletAddress, walletOpen } =
+  const { walletAddress, truncatedWalletAddress, walletOpen, online } =
     useSnapshot(state);
 
   const buttonStyles = {
@@ -19,6 +19,8 @@ const WalletButton: React.FC<{ css?: Stitches.CSS }> = ({ css }) => {
     justifyContent: "center",
     py: "$4",
     px: "$3",
+    opacity: online ? 1 : 0.5,
+    cursor: online ? "pointer" : "not-allowed",
     ...css,
   };
 
@@ -53,12 +55,12 @@ const WalletButton: React.FC<{ css?: Stitches.CSS }> = ({ css }) => {
       {walletAddress ? (
         <>
           <Box css={walletButtonStyles}>
-            {truncatedWalletAddress ? truncatedWalletAddress : <Loader />}
+            {truncatedWalletAddress ? truncatedWalletAddress : <LoaderWithDelay />}
           </Box>
         </>
       ) : (
-        <Box css={buttonStyles} onClick={() => connectWallet()}>
-          Connect
+        <Box css={buttonStyles} onClick={() => online && connectWallet()}>
+          { online ? "Connect" : "Offline" }
         </Box>
       )}{" "}
     </Box>

generated/graphql.ts

@@ -141,18 +141,24 @@ export type HourlyPriceHistory = {
 export type HourlyPriceHistory_Filter = {
   assetPair?: Maybe<Scalars['String']>;
   assetPair_contains?: Maybe<Scalars['String']>;
+  assetPair_contains_nocase?: Maybe<Scalars['String']>;
   assetPair_ends_with?: Maybe<Scalars['String']>;
+  assetPair_ends_with_nocase?: Maybe<Scalars['String']>;
   assetPair_gt?: Maybe<Scalars['String']>;
   assetPair_gte?: Maybe<Scalars['String']>;
   assetPair_in?: Maybe<Array<Scalars['String']>>;
   assetPair_lt?: Maybe<Scalars['String']>;
   assetPair_lte?: Maybe<Scalars['String']>;
   assetPair_not?: Maybe<Scalars['String']>;
   assetPair_not_contains?: Maybe<Scalars['String']>;
+  assetPair_not_contains_nocase?: Maybe<Scalars['String']>;
   assetPair_not_ends_with?: Maybe<Scalars['String']>;
+  assetPair_not_ends_with_nocase?: Maybe<Scalars['String']>;
   assetPair_not_in?: Maybe<Array<Scalars['String']>>;
   assetPair_not_starts_with?: Maybe<Scalars['String']>;
+  assetPair_not_starts_with_nocase?: Maybe<Scalars['String']>;
   assetPair_starts_with?: Maybe<Scalars['String']>;
+  assetPair_starts_with_nocase?: Maybe<Scalars['String']>;
   closingPrice?: Maybe<Scalars['BigInt']>;
   closingPrice_gt?: Maybe<Scalars['BigInt']>;
   closingPrice_gte?: Maybe<Scalars['BigInt']>;
@@ -211,18 +217,24 @@ export type HourlyPriceHistory_Filter = {
   openingPrice_not_in?: Maybe<Array<Scalars['BigInt']>>;
   test?: Maybe<Scalars['String']>;
   test_contains?: Maybe<Scalars['String']>;
+  test_contains_nocase?: Maybe<Scalars['String']>;
   test_ends_with?: Maybe<Scalars['String']>;
+  test_ends_with_nocase?: Maybe<Scalars['String']>;
   test_gt?: Maybe<Scalars['String']>;
   test_gte?: Maybe<Scalars['String']>;
   test_in?: Maybe<Array<Scalars['String']>>;
   test_lt?: Maybe<Scalars['String']>;
   test_lte?: Maybe<Scalars['String']>;
   test_not?: Maybe<Scalars['String']>;
   test_not_contains?: Maybe<Scalars['String']>;
+  test_not_contains_nocase?: Maybe<Scalars['String']>;
   test_not_ends_with?: Maybe<Scalars['String']>;
+  test_not_ends_with_nocase?: Maybe<Scalars['String']>;
   test_not_in?: Maybe<Array<Scalars['String']>>;
   test_not_starts_with?: Maybe<Scalars['String']>;
+  test_not_starts_with_nocase?: Maybe<Scalars['String']>;
   test_starts_with?: Maybe<Scalars['String']>;
+  test_starts_with_nocase?: Maybe<Scalars['String']>;
   timestamp?: Maybe<Scalars['BigInt']>;
   timestamp_gt?: Maybe<Scalars['BigInt']>;
   timestamp_gte?: Maybe<Scalars['BigInt']>;