From 8081cceafa40ecb84779df0d9eb4555547d99b98 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 25 Jan 2023 12:02:29 +0700
Subject: Skeleton

---
 src/components/elements/Skeleton.js |  18 +++++
 src/pages/my/transactions/[id].js   | 135 +++++++++++++++++++-----------------
 2 files changed, 90 insertions(+), 63 deletions(-)
 create mode 100644 src/components/elements/Skeleton.js

diff --git a/src/components/elements/Skeleton.js b/src/components/elements/Skeleton.js
new file mode 100644
index 00000000..843b200f
--- /dev/null
+++ b/src/components/elements/Skeleton.js
@@ -0,0 +1,18 @@
+const SkeletonList = ({ number }) => (
+  <div role="status" className="space-y-5 animate-pulse">
+    { Array.from(Array(number), (e, i) => (
+      <div className="flex items-center justify-between" key={i}>
+        <div>
+            <div className="h-2.5 bg-gray-300 rounded-full w-24 mb-2.5"></div>
+            <div className="w-32 h-2 bg-gray-200 rounded-full"></div>
+        </div>
+        <div className="h-2.5 bg-gray-300 rounded-full w-12"></div>
+    </div>
+    )) }
+    <span className="sr-only">Loading...</span>
+  </div>
+);
+
+export {
+  SkeletonList
+};
\ No newline at end of file
diff --git a/src/pages/my/transactions/[id].js b/src/pages/my/transactions/[id].js
index 79337a29..c56493ad 100644
--- a/src/pages/my/transactions/[id].js
+++ b/src/pages/my/transactions/[id].js
@@ -11,6 +11,7 @@ import currencyFormat from "@/core/utils/currencyFormat";
 import Disclosure from "@/components/elements/Disclosure";
 import DescriptionRow from "@/components/elements/DescriptionRow";
 import { CustomerSection } from "@/components/transactions/TransactionDetail";
+import { SkeletonList } from "@/components/elements/Skeleton";
 
 export default function DetailTransactions() {
   const router = useRouter();
@@ -44,79 +45,87 @@ export default function DetailTransactions() {
     <WithAuth>
       <Layout className="pb-4">
         <AppBar title="Detail Transaksi" />
-          
-        <div className="p-4 flex flex-col gap-y-4">
-          <DescriptionRow label="Status Transaksi">
-            <span className="badge-green">Pending Quotation</span>
-          </DescriptionRow>
-          <DescriptionRow label="No Transaksi">
-            { transaction?.name }
-          </DescriptionRow>
-          <DescriptionRow label="Purchase Order">
-            { transaction?.po_name || '-' }
-          </DescriptionRow>
-          <DescriptionRow label="Ketentuan Pembayaran">
-            { transaction?.payment_term }
-          </DescriptionRow>
-          <DescriptionRow label="Nama Sales">
-            { transaction?.sales }
-          </DescriptionRow>
-          <DescriptionRow label="Waktu Transaksi">
-            { transaction?.date_order }
-          </DescriptionRow>
-        </div>
+        
+        { transaction ? (
+          <>
+            <div className="p-4 flex flex-col gap-y-4">
+              <DescriptionRow label="Status Transaksi">
+                <span className="badge-green">Pending Quotation</span>
+              </DescriptionRow>
+              <DescriptionRow label="No Transaksi">
+                { transaction?.name }
+              </DescriptionRow>
+              <DescriptionRow label="Purchase Order">
+                { transaction?.po_name || '-' }
+              </DescriptionRow>
+              <DescriptionRow label="Ketentuan Pembayaran">
+                { transaction?.payment_term }
+              </DescriptionRow>
+              <DescriptionRow label="Nama Sales">
+                { transaction?.sales }
+              </DescriptionRow>
+              <DescriptionRow label="Waktu Transaksi">
+                { transaction?.date_order }
+              </DescriptionRow>
+            </div>
 
-        <LineDivider />
+            <LineDivider />
 
-        <Disclosure 
-          label="Detail Produk"
-        />
-
-        <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
-          { transaction?.products?.map((product, index) => (
-            <VariantCard
-              key={index}
-              data={product}
+            <Disclosure 
+              label="Detail Produk"
             />
-          )) }
-          <div className="flex justify-between mt-3 font-medium">
-            <p>Total Belanja</p>
-            <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
-          </div>
-        </div>
 
+            <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
+              { transaction?.products?.map((product, index) => (
+                <VariantCard
+                  key={index}
+                  data={product}
+                />
+              )) }
+              <div className="flex justify-between mt-3 font-medium">
+                <p>Total Belanja</p>
+                <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
+              </div>
+            </div>
 
-        <LineDivider />
 
-        <Disclosure 
-          label="Detail Pembeli" 
-          active={activeSection.purchase} 
-          onClick={() => toggleSection('purchase')} 
-        />
-        { activeSection.purchase && (
-          <CustomerSection address={transaction?.address?.customer} />
-        ) }
+            <LineDivider />
 
-        <LineDivider />
+            <Disclosure 
+              label="Detail Pembeli" 
+              active={activeSection.purchase} 
+              onClick={() => toggleSection('purchase')} 
+            />
+            { activeSection.purchase && (
+              <CustomerSection address={transaction?.address?.customer} />
+            ) }
 
-        <Disclosure 
-          label="Detail Pengiriman" 
-          active={activeSection.shipping} 
-          onClick={() => toggleSection('shipping')} 
-        />
-        { activeSection.shipping && (
-          <CustomerSection address={transaction?.address?.shipping} />
-        ) }
+            <LineDivider />
 
-        <LineDivider />
+            <Disclosure 
+              label="Detail Pengiriman" 
+              active={activeSection.shipping} 
+              onClick={() => toggleSection('shipping')} 
+            />
+            { activeSection.shipping && (
+              <CustomerSection address={transaction?.address?.shipping} />
+            ) }
+
+            <LineDivider />
 
-        <Disclosure 
-          label="Detail Penagihan" 
-          active={activeSection.invoice} 
-          onClick={() => toggleSection('invoice')} 
-        />
-        { activeSection.invoice && (
-          <CustomerSection address={transaction?.address?.invoice} />
+            <Disclosure 
+              label="Detail Penagihan" 
+              active={activeSection.invoice} 
+              onClick={() => toggleSection('invoice')} 
+            />
+            { activeSection.invoice && (
+              <CustomerSection address={transaction?.address?.invoice} />
+            ) }
+          </>
+        ) : (
+          <div className="p-4">
+            <SkeletonList number={12} />
+          </div>
         ) }
       </Layout>
     </WithAuth>
-- 
cgit v1.2.3