spinner default props

theme/components/Spinner.ts

+import { defineStyle, defineStyleConfig } from '@chakra-ui/styled-system';
+import { mode } from '@chakra-ui/theme-tools';
+
+const baseStyle = defineStyle((props) => {
+  const { emptyColor, color } = props;
+
+  return {
+    borderColor: color || 'blue.500',
+    borderBottomColor: emptyColor || mode('blackAlpha.200', 'whiteAlpha.200')(props),
+    borderLeftColor: emptyColor || mode('blackAlpha.200', 'whiteAlpha.200')(props),
+  };
+});
+
+const Spinner = defineStyleConfig({
+  baseStyle,
+  defaultProps: {
+    size: 'md',
+  },
+});
+
+export default Spinner;

theme/components/index.ts

@@ -12,6 +12,7 @@ import Modal from './Modal';
 import Popover from './Popover';
 import Radio from './Radio';
 import Skeleton from './Skeleton';
+import Spinner from './Spinner';
 import Table from './Table';
 import Tabs from './Tabs';
 import Tag from './Tag';
@@ -34,6 +35,7 @@ const components = {
   Popover,
   Radio,
   Skeleton,
+  Spinner,
   Tabs,
   Table,
   Tag,

ui/blocks/BlocksTableItem.tsx

@@ -19,13 +19,11 @@ interface Props {
 const BlocksTableItem = ({ data, isPending }: Props) => {
   const link = useLink();
 
-  const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
-
   return (
     <Tr>
       <Td fontSize="sm">
         <Flex columnGap={ 2 } alignItems="center">
-          { isPending && <Spinner size="sm" color="blue.500" emptyColor={ spinnerEmptyColor }/> }
+          { isPending && <Spinner size="sm"/> }
           <Link
             fontWeight={ 600 }
             href={ link('block_index', { id: String(data.height) }) }