fix

1 files changed, 15 insertions, 11 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 7da33551..55e959fa 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -2,7 +2,7 @@ import Spinner from '@/core/components/elements/Spinner/Spinner'
 import useTransaction from '../hooks/useTransaction'
 import TransactionStatusBadge from './TransactionStatusBadge'
 import Divider from '@/core/components/elements/Divider/Divider'
-import { useRef, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { downloadPurchaseOrder, downloadQuotation } from '../utils/transactions'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import uploadPoApi from '../api/uploadPoApi'
@@ -68,6 +68,19 @@ const Transaction = ({ id }) => {
     transaction.refetch()
   }
 
+  const memoizeVariantGroupCard = useMemo(() => (
+    <div className='p-4 pt-0 flex flex-col gap-y-3'>
+      <VariantGroupCard
+        variants={transaction.data?.products}
+        buyMore
+      />
+      <div className='flex justify-between mt-3 font-medium'>
+        <p>Total Belanja</p>
+        <p>{currencyFormat(transaction.data?.amountTotal)}</p>
+      </div>
+    </div>
+  ), [transaction.data])
+
   if (transaction.isLoading) {
     return (
       <div className='flex justify-center my-6'>
@@ -119,16 +132,7 @@ const Transaction = ({ id }) => {
 
         <div className='font-medium p-4'>Detail Produk</div>
 
-        <div className='p-4 pt-0 flex flex-col gap-y-3'>
-          <VariantGroupCard
-            variants={transaction.data?.products}
-            buyMore
-          />
-          <div className='flex justify-between mt-3 font-medium'>
-            <p>Total Belanja</p>
-            <p>{currencyFormat(transaction.data?.amountTotal)}</p>
-          </div>
-        </div>
+        { memoizeVariantGroupCard }
 
         <Divider />