Merge pull request #39 from lidofinance/fix/overview-comps

feat: add loading state to overview components and create OverviewIte…

Author: Jeday

features/overview/components/balance/balance.tsx

@@ -45,6 +45,7 @@ export const Balance = () => {
           content={item.payload}
           actionText={item.actionText}
           actionLink={item.actionLink}
+          isLoading={item.isLoading}
         />
       ))}
     </OverviewSection>

features/overview/components/capacity/capacity.tsx

@@ -27,6 +27,7 @@ export const Capacity = () => {
           key={item.title}
           title={item.title}
           content={item.payload}
+          isLoading={item.isLoading}
         />
       ))}
     </OverviewSection>

features/overview/components/general/general.tsx

@@ -27,6 +27,7 @@ export const General = () => {
           key={item.title}
           title={item.title}
           content={item.payload}
+          isLoading={item.isLoading}
         />
       ))}
     </OverviewSection>

features/overview/components/health/heath.tsx

@@ -31,6 +31,7 @@ export const Health = () => {
           key={item.title}
           title={item.title}
           content={item.payload}
+          isLoading={item.isLoading}
         />
       ))}
     </OverviewSection>

features/overview/components/node-operator/node-operator.tsx

@@ -27,6 +27,7 @@ export const NodeOperator = () => {
           content={item.payload}
           actionLink={item.actionLink}
           actionText={item.actionText}
+          isLoading={item.isLoading}
         />
       ))}
     </OverviewSection>

features/overview/contexts/vault-overview.tsx

@@ -35,6 +35,7 @@ export interface VaultOverviewContextType {
     collateral: string;
     pendingUnlockEth: string;
   };
+  isLoadingVault?: boolean;
   getVaultDataToRender: (
     payload: SectionPayload[],
   ) => (SectionPayload & { payload: string | Address })[];
@@ -46,6 +47,7 @@ export type SectionPayload = {
   key: VaultOverviewContextKeys;
   actionText?: string;
   actionLink?: string;
+  isLoading?: boolean;
 };
 
 const VaultOverviewContext = createContext<VaultOverviewContextType | null>(
@@ -56,7 +58,7 @@ const toEthValue = (value: bigint) => `${formatBalance(value).trimmed} ETH`;
 const toStethValue = (value: bigint) => `${formatBalance(value).trimmed} stETH`;
 
 export const VaultOverviewProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { activeVault } = useVaultInfo();
+  const { activeVault, isLoadingVault } = useVaultInfo();
 
   const values: VaultOverviewContextType['values'] = useMemo(() => {
     if (activeVault) {
@@ -130,19 +132,24 @@ export const VaultOverviewProvider: FC<PropsWithChildren> = ({ children }) => {
         nodeOperatorFee,
         collateral,
         pendingUnlockEth,
+        isLoadingVault,
       };
     }
 
     return {} as VaultOverviewContextType['values'];
-  }, [activeVault]);
+  }, [activeVault, isLoadingVault]);
 
   const getVaultDataToRender = useCallback(
     (sectionPayloadList: SectionPayload[]) => {
       return sectionPayloadList.map((item) => {
-        return { ...item, payload: values[item.key] };
+        return {
+          ...item,
+          payload: values[item.key],
+          isLoading: isLoadingVault,
+        };
       });
     },
-    [values],
+    [values, isLoadingVault],
   );
 
   return (

features/overview/contexts/vault-provider.tsx

@@ -43,14 +43,14 @@ export const VaultProvider: FC<PropsWithChildren> = ({ children }) => {
     () => ({
       vaultAddress: sanitizedVaultAddress,
       activeVault: query.data,
-      isLoadingVault: query.isLoading,
+      isLoadingVault: query.isPending,
       error: query.error,
       refetch: query.refetch,
     }),
     [
       sanitizedVaultAddress,
       query.data,
-      query.isLoading,
+      query.isPending,
       query.error,
       query.refetch,
     ],

features/overview/shared/overview-item/overview-item-value.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { Text, InlineLoader } from '@lidofinance/lido-ui';
+
+import { LoaderWrapper, ValueWrapper } from './styles';
+
+export interface ItemValueProps {
+  content: string | number | undefined;
+  isLoading?: boolean;
+  isSuccess?: boolean;
+}
+
+export const OverviewItemValue: FC<ItemValueProps> = (props) => {
+  const { content, isSuccess, isLoading } = props;
+  const contentColor = isSuccess ? 'success' : 'default';
+
+  return (
+    <>
+      {isLoading ? (
+        <LoaderWrapper>
+          <InlineLoader />
+        </LoaderWrapper>
+      ) : (
+        <ValueWrapper>
+          <Text size="lg" color={contentColor} strong>
+            {content ?? '-'}
+          </Text>
+        </ValueWrapper>
+      )}
+    </>
+  );
+};

features/overview/shared/overview-item/overview-item.tsx

@@ -5,19 +5,22 @@ import { ItemWrapper, Title } from './styles';
 import { useRouter } from 'next/router';
 import { useVaultInfo } from 'features/overview/contexts';
 
+import { OverviewItemValue } from './overview-item-value';
+
 export interface ItemProps {
   title: string;
   content: string | number | undefined;
   actionLink?: string;
   actionText?: string;
   isSuccess?: boolean;
+  isLoading?: boolean;
 }
 
 export const OverviewItem: FC<ItemProps> = (props) => {
   const router = useRouter();
   const { activeVault } = useVaultInfo();
-  const { title, content, isSuccess, actionLink, actionText } = props;
-  const contentColor = isSuccess ? 'success' : 'default';
+  const { title, content, isSuccess, actionLink, actionText, isLoading } =
+    props;
 
   return (
     <ItemWrapper>
@@ -26,9 +29,11 @@ export const OverviewItem: FC<ItemProps> = (props) => {
           {title}
         </Text>
       </Title>
-      <Text size="lg" color={contentColor} strong>
-        {content ?? '-'}
-      </Text>
+      <OverviewItemValue
+        content={content}
+        isLoading={isLoading}
+        isSuccess={isSuccess}
+      />
       {!!actionLink && !!actionText && (
         <Button
           size="xs"

features/overview/shared/overview-item/styles.ts

@@ -9,3 +9,12 @@ export const Title = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export const LoaderWrapper = styled.div`
+  padding-top: ${({ theme }) => theme.spaceMap.sm}px;
+  padding-bottom: 10px;
+`;
+
+export const ValueWrapper = styled.div`
+  padding-bottom: ${({ theme }) => theme.spaceMap.sm}px;
+`;