style: add wordpress loading

Author: Nick-1979

packages/extension-polkagate/src/components/Progress.tsx

@@ -2,27 +2,30 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Grid, useTheme } from '@mui/material';
-//@ts-ignore
-import { Circle, CubeGrid, WanderingCubes } from 'better-react-spinkit';
+// @ts-ignore
+import { Circle, CubeGrid, WanderingCubes, Wordpress } from 'better-react-spinkit';
 import React from 'react';
 
 interface Props {
+  direction?: 'column' | 'row'
   fontSize?: number;
+  titlePaddingTop?: number;
+  titlePaddingLeft?: number;
   title?: string;
   pt?: number | string;
   size?: number;
   gridSize?: number;
-  type?: 'circle' | 'cubes' | 'grid';
+  type?: 'circle' | 'cubes' | 'grid' | 'wordpress';
 }
 
-function Progress ({ fontSize = 13, gridSize = 135, pt = '50px', size = 25, title, type = 'circle' }: Props): React.ReactElement<Props> {
+function Progress ({ direction = 'column', fontSize = 13, gridSize = 135, pt = '50px', size = 25, title, titlePaddingTop = 20, titlePaddingLeft = 0, type = 'circle' }: Props): React.ReactElement<Props> {
   const theme = useTheme();
 
   return (
     <Grid
       alignItems='center'
       container
-      direction='column'
+      direction={direction}
       justifyContent='center'
       pt={pt}
     >
@@ -34,6 +37,12 @@ function Progress ({ fontSize = 13, gridSize = 135, pt = '50px', size = 25, titl
           size={size}
         />
       }
+      {type === 'wordpress' &&
+        <Wordpress
+          color={theme.palette.primary.main}
+          size={size}
+        />
+      }
       {type === 'cubes' &&
         <WanderingCubes
           color={theme.palette.primary.main}
@@ -55,7 +64,11 @@ function Progress ({ fontSize = 13, gridSize = 135, pt = '50px', size = 25, titl
       {title &&
         <Grid
           item
-          sx={{ fontSize, paddingTop: '20px' }}
+          sx={{
+            fontSize,
+            pl: `${titlePaddingLeft}px`,
+            pt: `${titlePaddingTop}px`
+          }}
         >
           {title}
         </Grid>

packages/extension-polkagate/src/popup/history/index.tsx

@@ -78,7 +78,15 @@ export default function TransactionHistory (): React.ReactElement {
               // staking transaction history is saved locally
               tabIndex !== TAB_MAP.STAKING &&
               ((transfersTx?.hasMore)
-                ? 'loading...'
+                ? <Progress
+                  direction='row'
+                  pt='5px'
+                  size={15}
+                  title={t('Loading...')}
+                  titlePaddingLeft={5}
+                  titlePaddingTop={0}
+                  type='wordpress'
+                />
                 : !!tabHistory?.length &&
                 <Box fontSize={11}>
                   {t('No more transactions to load')}

packages/extension-polkagate/src/popup/history/modal/HistoryModal.tsx

@@ -85,7 +85,15 @@ export default function HistoryModal ({ address, setDisplayPopup }: Props): Reac
                     // staking transaction history is saved locally
                     tabIndex !== TAB_MAP.STAKING &&
                     ((transfersTx?.hasMore)
-                      ? 'loading...'
+                      ? <Progress
+                        direction='row'
+                        pt='5px'
+                        size={15}
+                        title={t('Loading...')}
+                        titlePaddingLeft={5}
+                        titlePaddingTop={0}
+                        type='wordpress'
+                      />
                       : !!tabHistory?.length &&
                       <Box fontSize={11}>
                         {t('No more transactions to load')}