Added loading and Suspense

app/(root)/loading.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const Loading = () => {
+  return (
+    <div className='w-full flex justify-center items-center h-full m-auto'>
+
+      <div className="flex flex-row gap-2">
+        <div className="w-4 h-4 rounded-full bg-blue-700 animate-bounce"></div>
+        <div className="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:-.3s]"></div>
+        <div className="w-4 h-4 rounded-full bg-blue-700 animate-bounce [animation-delay:-.5s]"></div>
+      </div>
+    </div>
+  )
+}
+
+export default Loading

app/(root)/my-banks/page.tsx

@@ -2,38 +2,41 @@ import BankCard from '@/components/BankCard';
 import HeaderBox from '@/components/HeaderBox'
 import { getAccounts } from '@/lib/actions/bank.actions';
 import { getLoggedInUser } from '@/lib/actions/user.actions';
-import React from 'react'
+import React, { Suspense } from 'react'
+import Loading from '../loading';
 
 const MyBanks = async () => {
   const loggedIn = await getLoggedInUser();
-  const accounts = await getAccounts({ 
-    userId: loggedIn.$id 
+  const accounts = await getAccounts({
+    userId: loggedIn.$id
   })
 
   return (
-    <section className='flex'>
-      <div className="my-banks">
-        <HeaderBox 
-          title="My Bank Accounts"
-          subtext="Effortlessly manage your banking activites."
-        />
+    <Suspense fallback={<Loading />}>
+      <section className='flex'>
+        <div className="my-banks">
+          <HeaderBox
+            title="My Bank Accounts"
+            subtext="Effortlessly manage your banking activites."
+          />
 
-        <div className="space-y-4">
-          <h2 className="header-2">
-            Your cards
-          </h2>
-          <div className="flex flex-wrap gap-6">
-            {accounts && accounts.data.map((a: Account) => (
-              <BankCard 
-                key={accounts.id}
-                account={a}
-                userName={loggedIn?.firstName}
-              />
-            ))}
+          <div className="space-y-4">
+            <h2 className="header-2">
+              Your cards
+            </h2>
+            <div className="flex flex-wrap gap-6">
+              {accounts && accounts.data.map((a: Account) => (
+                <BankCard
+                  key={accounts.id}
+                  account={a}
+                  userName={loggedIn?.firstName}
+                />
+              ))}
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </Suspense>
   )
 }
 

app/(root)/page.tsx

@@ -4,53 +4,57 @@ import RightSidebar from '@/components/RightSidebar';
 import TotalBalanceBox from '@/components/TotalBalanceBox';
 import { getAccount, getAccounts } from '@/lib/actions/bank.actions';
 import { getLoggedInUser } from '@/lib/actions/user.actions';
+import Loading from './loading';
+import { Suspense } from 'react';
 
 const Home = async ({ searchParams: { id, page } }: SearchParamProps) => {
   const currentPage = Number(page as string) || 1;
   const loggedIn = await getLoggedInUser();
-  const accounts = await getAccounts({ 
-    userId: loggedIn.$id 
+  const accounts = await getAccounts({
+    userId: loggedIn.$id
   })
 
-  if(!accounts) return;
-  
+  if (!accounts) return;
+
   const accountsData = accounts?.data;
   const appwriteItemId = (id as string) || accountsData[0]?.appwriteItemId;
 
   const account = await getAccount({ appwriteItemId })
 
   return (
-    <section className="home">
-      <div className="home-content">
-        <header className="home-header">
-          <HeaderBox 
-            type="greeting"
-            title="Welcome"
-            user={loggedIn?.firstName || 'Guest'}
-            subtext="Access and manage your account and transactions efficiently."
-          />
-
-          <TotalBalanceBox 
+    <Suspense fallback={<Loading />}>
+      <section className="home">
+        <div className="home-content">
+          <header className="home-header">
+            <HeaderBox
+              type="greeting"
+              title="Welcome"
+              user={loggedIn?.firstName || 'Guest'}
+              subtext="Access and manage your account and transactions efficiently."
+            />
+
+            <TotalBalanceBox
+              accounts={accountsData}
+              totalBanks={accounts?.totalBanks}
+              totalCurrentBalance={accounts?.totalCurrentBalance}
+            />
+          </header>
+
+          <RecentTransactions
             accounts={accountsData}
-            totalBanks={accounts?.totalBanks}
-            totalCurrentBalance={accounts?.totalCurrentBalance}
+            transactions={account?.transactions}
+            appwriteItemId={appwriteItemId}
+            page={currentPage}
           />
-        </header>
+        </div>
 
-        <RecentTransactions 
-          accounts={accountsData}
+        <RightSidebar
+          user={loggedIn}
           transactions={account?.transactions}
-          appwriteItemId={appwriteItemId}
-          page={currentPage}
+          banks={accountsData?.slice(0, 2)}
         />
-      </div>
-
-      <RightSidebar 
-        user={loggedIn}
-        transactions={account?.transactions}
-        banks={accountsData?.slice(0, 2)}
-      />
-    </section>
+      </section>
+    </Suspense>
   )
 }
 

app/(root)/payment-transfer/page.tsx

@@ -2,29 +2,32 @@ import HeaderBox from '@/components/HeaderBox'
 import PaymentTransferForm from '@/components/PaymentTransferForm'
 import { getAccounts } from '@/lib/actions/bank.actions';
 import { getLoggedInUser } from '@/lib/actions/user.actions';
-import React from 'react'
+import React, { Suspense } from 'react'
+import Loading from '../loading';
 
 const Transfer = async () => {
   const loggedIn = await getLoggedInUser();
-  const accounts = await getAccounts({ 
-    userId: loggedIn.$id 
+  const accounts = await getAccounts({
+    userId: loggedIn.$id
   })
 
-  if(!accounts) return;
-  
+  if (!accounts) return;
+
   const accountsData = accounts?.data;
 
   return (
-    <section className="payment-transfer">
-      <HeaderBox 
-        title="Payment Transfer"
-        subtext="Please provide any specific details or notes related to the payment transfer"
-      />
+    <Suspense fallback={<Loading />}>
+      <section className="payment-transfer">
+        <HeaderBox
+          title="Payment Transfer"
+          subtext="Please provide any specific details or notes related to the payment transfer"
+        />
 
-      <section className="size-full pt-5">
-        <PaymentTransferForm accounts={accountsData} />
+        <section className="size-full pt-5">
+          <PaymentTransferForm accounts={accountsData} />
+        </section>
       </section>
-    </section>
+    </Suspense>
   )
 }
 

app/(root)/transaction-history/page.tsx

@@ -4,71 +4,74 @@ import TransactionsTable from '@/components/TransactionsTable';
 import { getAccount, getAccounts } from '@/lib/actions/bank.actions';
 import { getLoggedInUser } from '@/lib/actions/user.actions';
 import { formatAmount } from '@/lib/utils';
-import React from 'react'
+import React, { Suspense } from 'react'
+import Loading from '../loading';
 
-const TransactionHistory = async ({ searchParams: { id, page }}:SearchParamProps) => {
+const TransactionHistory = async ({ searchParams: { id, page } }: SearchParamProps) => {
   const currentPage = Number(page as string) || 1;
   const loggedIn = await getLoggedInUser();
-  const accounts = await getAccounts({ 
-    userId: loggedIn.$id 
+  const accounts = await getAccounts({
+    userId: loggedIn.$id
   })
 
-  if(!accounts) return;
-  
+  if (!accounts) return;
+
   const accountsData = accounts?.data;
   const appwriteItemId = (id as string) || accountsData[0]?.appwriteItemId;
 
   const account = await getAccount({ appwriteItemId })
 
 
-const rowsPerPage = 10;
-const totalPages = Math.ceil(account?.transactions.length / rowsPerPage);
+  const rowsPerPage = 10;
+  const totalPages = Math.ceil(account?.transactions.length / rowsPerPage);
 
-const indexOfLastTransaction = currentPage * rowsPerPage;
-const indexOfFirstTransaction = indexOfLastTransaction - rowsPerPage;
+  const indexOfLastTransaction = currentPage * rowsPerPage;
+  const indexOfFirstTransaction = indexOfLastTransaction - rowsPerPage;
 
-const currentTransactions = account?.transactions.slice(
-  indexOfFirstTransaction, indexOfLastTransaction
-)
+  const currentTransactions = account?.transactions.slice(
+    indexOfFirstTransaction, indexOfLastTransaction
+  )
   return (
-    <div className="transactions">
-      <div className="transactions-header">
-        <HeaderBox 
-          title="Transaction History"
-          subtext="See your bank details and transactions."
-        />
-      </div>
+    <Suspense fallback={<Loading />}>
+      <div className="transactions">
+        <div className="transactions-header">
+          <HeaderBox
+            title="Transaction History"
+            subtext="See your bank details and transactions."
+          />
+        </div>
 
-      <div className="space-y-6">
-        <div className="transactions-account">
-          <div className="flex flex-col gap-2">
-            <h2 className="text-18 font-bold text-white">{account?.data.name}</h2>
-            <p className="text-14 text-blue-25">
-              {account?.data.officialName}
-            </p>
-            <p className="text-14 font-semibold tracking-[1.1px] text-white">
-              ●●●● ●●●● ●●●● {account?.data.mask}
-            </p>
-          </div>
-
-          <div className='transactions-account-balance'>
-            <p className="text-14">Current balance</p>
-            <p className="text-24 text-center font-bold">{formatAmount(account?.data.currentBalance)}</p>
+        <div className="space-y-6">
+          <div className="transactions-account">
+            <div className="flex flex-col gap-2">
+              <h2 className="text-18 font-bold text-white">{account?.data.name}</h2>
+              <p className="text-14 text-blue-25">
+                {account?.data.officialName}
+              </p>
+              <p className="text-14 font-semibold tracking-[1.1px] text-white">
+                ●●●● ●●●● ●●●● {account?.data.mask}
+              </p>
+            </div>
+
+            <div className='transactions-account-balance'>
+              <p className="text-14">Current balance</p>
+              <p className="text-24 text-center font-bold">{formatAmount(account?.data.currentBalance)}</p>
+            </div>
           </div>
-        </div>
 
-        <section className="flex w-full flex-col gap-6">
-          <TransactionsTable 
-            transactions={currentTransactions}
-          />
+          <section className="flex w-full flex-col gap-6">
+            <TransactionsTable
+              transactions={currentTransactions}
+            />
             {totalPages > 1 && (
               <div className="my-4 w-full">
                 <Pagination totalPages={totalPages} page={currentPage} />
               </div>
             )}
-        </section>
+          </section>
+        </div>
       </div>
-    </div>
+    </Suspense>
   )
 }