chore: upgrade date-fns and restyle balance card component

app/page.tsx

@@ -208,18 +208,18 @@ export default async function Home(props: {
               <p className='mt-2 text-default-500 md:mt-4'>Searched Totals</p>
               <div className='flex flex-col flex-wrap justify-center'>
                 <p>
-                  {<PiArrowCircleUpFill className='mr-1 inline fill-success' />}
-                  Income:{' '}
+                  <PiArrowCircleUpFill className='mr-1 inline fill-success' />
+                  <span className='text-sm text-default-500'>Income:</span>{' '}
                   {getFormattedCurrency(
                     getTransactionsTotals(searchedTransactionsByQuery).income,
                   )}{' '}
                   {currency?.code}
                 </p>
                 <p>
-                  {
-                    <PiArrowCircleDownFill className='mr-1 inline fill-danger' />
-                  }
-                  Expense:{' '}
+                  <PiArrowCircleDownFill className='mr-1 inline fill-danger' />
+                  <span className='text-sm text-default-500'>
+                    Expense:
+                  </span>{' '}
                   {getFormattedCurrency(
                     getTransactionsTotals(searchedTransactionsByQuery).expense,
                   )}{' '}

app/ui/balance-card.tsx

@@ -1,14 +1,16 @@
 'use client'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { PiArrowCircleDownFill, PiArrowCircleUpFill } from 'react-icons/pi'
 
 import { Card, CardHeader } from '@nextui-org/react'
+import { motion } from 'framer-motion'
 
 import {
   DEFAULT_CURRENCY_CODE,
   DEFAULT_TIME_ZONE,
 } from '@/config/constants/main'
+import { DIV } from '@/config/constants/motion'
 
 import { getAllTransactions } from '../lib/actions'
 import { getTransactionsTotals } from '../lib/data'
@@ -28,6 +30,7 @@ type TProps = {
 }
 
 function BalanceCard({ balance, currency, user }: TProps) {
+  const hasMounted = useRef(false)
   const [isChangeInfo, setIsChangeInfo] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [total, setTotal] = useState<{
@@ -74,8 +77,13 @@ function BalanceCard({ balance, currency, user }: TProps) {
   }, [getTotal, isChangeInfo, isTotalLoaded])
 
   useEffect(() => {
-    getTotal()
-  }, [balance, getTotal])
+    if (hasMounted.current) {
+      // Don't run on first render.
+      getTotal()
+    } else {
+      hasMounted.current = true
+    }
+  }, [getTotal, balance])
 
   return (
     <Card
@@ -90,15 +98,20 @@ function BalanceCard({ balance, currency, user }: TProps) {
       <div className='pointer-events-none absolute -inset-px opacity-0 transition duration-300' />
       <CardHeader className='flex flex-col items-center justify-between gap-4 px-2 md:px-4'>
         <div
-          className='text-center text-xl'
+          className='cursor-pointer text-center text-xl'
           onClick={onChangeInfo}
           aria-hidden='true'
         >
           <p className='mb-4 text-xs'>{greetingMsg}</p>
           {isChangeInfo ? (
             <>
               {!isLoading && isTotalLoaded ? (
-                <div className='flex cursor-pointer flex-wrap justify-center gap-0 text-lg font-semibold md:gap-2'>
+                <motion.div
+                  className='flex select-none flex-wrap justify-center gap-0 text-lg font-semibold md:gap-2'
+                  initial={{ opacity: 0, scale: 0, y: 20 }}
+                  animate={{ opacity: 1, scale: 1, y: 0 }}
+                  transition={{ ...DIV.TRANSITION_SPRING }}
+                >
                   <p>
                     <PiArrowCircleUpFill className='mr-1 inline fill-success' />
                     <span className='text-sm text-default-500'>
@@ -111,20 +124,37 @@ function BalanceCard({ balance, currency, user }: TProps) {
                     <span className='text-sm text-default-500'>Expense:</span>{' '}
                     {getFormattedCurrency(total.expense)} {currency?.code}
                   </p>
-                </div>
+                </motion.div>
               ) : (
-                <Loading
-                  size='sm'
-                  inline
-                  wrapperCN='flex flex-col items-center py-1'
-                />
+                <motion.div
+                  className='flex h-7 items-center justify-center gap-2'
+                  initial={{ opacity: 0, scale: 0, y: 0 }}
+                  animate={{ opacity: 1, scale: 1, y: 0 }}
+                  transition={{ ...DIV.TRANSITION_SPRING }}
+                >
+                  <Loading
+                    size='sm'
+                    inline
+                    wrapperCN='flex flex-col items-center mb-1'
+                  />
+                  <p className='text-sm'>Loading totals...</p>
+                </motion.div>
               )}
             </>
           ) : (
-            <p className='cursor-pointer font-semibold'>
+            <motion.p
+              className='select-none font-semibold'
+              initial={
+                isTotalLoaded
+                  ? { opacity: 0, scale: 0, y: -20 }
+                  : { opacity: 1, scale: 1, y: 0 }
+              }
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              transition={{ ...DIV.TRANSITION_SPRING }}
+            >
               {getFormattedBalance(balance)}{' '}
               {currency?.code || DEFAULT_CURRENCY_CODE}
-            </p>
+            </motion.p>
           )}
         </div>
       </CardHeader>

app/ui/home/transaction-form.tsx

@@ -94,7 +94,7 @@ function TransactionForm({ currency, userCategories }: TProps) {
 
   const resetAllStates = () => {
     setIsSwitchedOn(false)
-    setIsExpanded(false)
+    // setIsExpanded(false)
     setAmount('')
     setDescription('')
     setIsLoadingAIData(false)

config/constants/motion.ts

@@ -7,6 +7,10 @@ export const DIV = {
     return {}
   },
   TRANSITION: { type: 'tween', duration: 0.2 },
+  TRANSITION_SPRING: {
+    scale: { type: 'spring', visualDuration: 0.2, bounce: 0.2 },
+    duration: 0.2,
+  },
 }
 
 // Comment the custom view transition function until all modern browsers support it.

package.json

@@ -33,7 +33,7 @@
     "@vercel/analytics": "^1.4.1",
     "@vercel/speed-insights": "^1.1.0",
     "clsx": "^2.1.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "emoji-picker-react": "^4.12.0",
     "emoji-regex": "^10.4.0",