feat: add skeleton to chain select

lifinance · Apr 5, 2022 · af62515 · af62515
1 parent 49260fb
commit af62515
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/widget/src/components/SelectTokenDrawer/ChainSelect.tsx b/packages/widget/src/components/SelectTokenDrawer/ChainSelect.tsx
@@ -4,6 +4,7 @@ import {
   ListItemIcon,
   MenuItem,
   SelectChangeEvent,
+  Skeleton,
 } from '@mui/material';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useChains } from '../../hooks/useChains';
@@ -18,7 +19,7 @@ import { Select } from '../Select';
 export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
   const { setValue } = useFormContext();
   const { fromChain, toChain } = useWidgetConfig();
-  const { chains } = useChains();
+  const { chains, isLoading } = useChains();
   const [fromChainId, toChainId] = useWatch({
     name: [SwapFormKey.FromChain, SwapFormKey.ToChain],
   });
@@ -44,7 +45,7 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
     </MenuItem>
   ));
 
-  return (
+  return !isLoading ? (
     <>
       <FormControl
         fullWidth
@@ -73,5 +74,12 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
         </Select>
       </FormControl>
     </>
+  ) : (
+    <Skeleton
+      variant="rectangular"
+      width="100%"
+      height={45}
+      sx={{ borderRadius: '8px' }}
+    />
   );
 };
diff --git a/packages/widget/src/hooks/useChains.ts b/packages/widget/src/hooks/useChains.ts
@@ -5,7 +5,7 @@ import { useWidgetConfig } from '../providers/WidgetProvider';
 
 export const useChains = () => {
   const { enabledChains } = useWidgetConfig();
-  const { data, isLoading } = useQuery(['chains'], async () => {
+  const { data, ...other } = useQuery(['chains'], async () => {
     const possibilities = await LiFi.getPossibilities({ include: ['chains'] });
     return possibilities?.chains?.filter((chain) =>
       enabledChains.includes(chain.id),
@@ -23,5 +23,5 @@ export const useChains = () => {
     [data],
   );
 
-  return { chains: data, isLoading, getChainById };
+  return { chains: data, getChainById, ...other };
 };