animate block enterance

ui/blocks/BlocksContent.tsx

@@ -1,5 +1,5 @@
-import { Box, Text, Show, Alert, Skeleton } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
+import { Box, Text, Show, Alert, Skeleton, Button } from '@chakra-ui/react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
 import type { BlockType, BlocksResponse } from 'types/api/block';
@@ -25,6 +25,23 @@ const BlocksContent = ({ type }: Props) => {
     async() => await fetch(`/api/blocks${ type ? `?type=${ type }` : '' }`),
   );
 
+  const queryClient = useQueryClient();
+  const handleAddNewBlock = React.useCallback(() => {
+    queryClient.setQueryData([ QueryKeys.blocks, type ], (prevData: BlocksResponse | undefined) => {
+      if (prevData === undefined) {
+        return;
+      }
+
+      return {
+        ...prevData,
+        items: [
+          { ...prevData.items[0], height: prevData.items[0].height + 1, timestamp: (new Date()).toString() },
+          ...prevData.items,
+        ],
+      };
+    });
+  }, [ queryClient, type ]);
+
   if (isLoading) {
     return (
       <>
@@ -49,7 +66,10 @@ const BlocksContent = ({ type }: Props) => {
 
   return (
     <>
-      <Text>Total of { data.items[0].height.toLocaleString() } blocks</Text>
+      <Text as="span">Total of { data.items[0].height.toLocaleString() } blocks</Text>
+      { /* for demo purpose only to show how blocks will appear in the list */ }
+      { /* remove when adding socket to update block list */ }
+      <Button display="inline" size="sm" ml={ 4 } onClick={ handleAddNewBlock }>Add new block</Button>
       <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
       <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>

ui/blocks/BlocksList.tsx

@@ -1,4 +1,5 @@
 import { Box } from '@chakra-ui/react';
+import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -12,8 +13,10 @@ interface Props {
 const BlocksList = ({ data }: Props) => {
   return (
     <Box mt={ 8 }>
-      { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
-      { data.map((item) => <BlocksListItem key={ item.height } data={ item } enableTimeIncrement/>) }
+      <AnimatePresence initial={ false }>
+        { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
+        { data.map((item) => <BlocksListItem key={ item.height } data={ item } enableTimeIncrement/>) }
+      </AnimatePresence>
     </Box>
   );
 };

ui/blocks/BlocksListItem.tsx

@@ -28,7 +28,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const { totalReward, burntFees, txFees } = getBlockReward(data);
 
   return (
-    <AccountListItemMobile rowGap={ 3 }>
+    <AccountListItemMobile rowGap={ 3 } key={ String(data.height) }>
       <Flex justifyContent="space-between" w="100%">
         <Flex columnGap={ 2 } alignItems="center">
           { isPending && <Spinner size="sm" color="blue.500" emptyColor={ spinnerEmptyColor }/> }

ui/blocks/BlocksTable.tsx

@@ -1,4 +1,5 @@
 import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import { AnimatePresence } from 'framer-motion';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
 
@@ -29,8 +30,10 @@ const BlocksTable = ({ data }: Props) => {
           </Tr>
         </Thead>
         <Tbody>
-          { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
-          { data.map((item) => <BlocksTableItem key={ item.height } data={ item } enableTimeIncrement/>) }
+          <AnimatePresence initial={ false }>
+            { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
+            { data.map((item) => <BlocksTableItem key={ item.height } data={ item } enableTimeIncrement/>) }
+          </AnimatePresence>
         </Tbody>
       </Table>
     </TableContainer>

ui/blocks/BlocksTableItem.tsx

@@ -1,5 +1,6 @@
 import { Tr, Td, Link, Flex, Box, Icon, Tooltip, Spinner, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
+import { motion } from 'framer-motion';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -23,7 +24,14 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const { totalReward, burntFees, txFees } = getBlockReward(data);
 
   return (
-    <Tr>
+    <Tr
+      as={ motion.tr }
+      initial={{ opacity: 0, scale: 0.97 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transitionDuration="normal"
+      transitionTimingFunction="linear"
+      key={ data.height }
+    >
       <Td fontSize="sm">
         <Flex columnGap={ 2 } alignItems="center" mb={ 2 }>
           { isPending && <Spinner size="sm" flexShrink={ 0 }/> }

ui/shared/AccountListItemMobile.tsx

@@ -1,14 +1,22 @@
 import { Flex, useColorModeValue, chakra } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
 import React from 'react';
 
 interface Props {
   children: React.ReactNode;
   className?: string;
+  key?: string;
 }
 
-const AccountListItemMobile = ({ children, className }: Props) => {
+const AccountListItemMobile = ({ children, className, key }: Props) => {
   return (
     <Flex
+      as={ motion.div }
+      initial={{ opacity: 0, scale: 0.97 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transitionDuration="normal"
+      transitionTimingFunction="linear"
+      key={ key }
       rowGap={ 6 }
       alignItems="flex-start"
       flexDirection="column"