1 files changed, 33 insertions, 25 deletions
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index 85eda80b..52edbd05 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -1,36 +1,36 @@
-import Alert from '@/core/components/elements/Alert/Alert';
-import Divider from '@/core/components/elements/Divider/Divider';
-import Link from '@/core/components/elements/Link/Link';
-import useAuth from '@/core/hooks/useAuth';
-import { getItemAddress } from '@/core/utils/address';
-import addressesApi from '@/lib/address/api/addressesApi';
+import { Skeleton, Spinner } from '@chakra-ui/react';
 import {
   BanknotesIcon,
   ChevronLeftIcon,
   ClockIcon,
   ExclamationCircleIcon,
 } from '@heroicons/react/24/outline';
+import axios from 'axios';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRouter } from 'next/router';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import _ from 'lodash';
-import { deleteItemCart } from '@/core/utils/cart';
-import currencyFormat from '@/core/utils/currencyFormat';
 import { toast } from 'react-hot-toast';
-import getFileBase64 from '@/core/utils/getFileBase64';
-import { useRouter } from 'next/router';
-import axios from 'axios';
+import { useQuery } from 'react-query';
+import snakecaseKeys from 'snakecase-keys';
+
+import Alert from '@/core/components/elements/Alert/Alert';
+import Divider from '@/core/components/elements/Divider/Divider';
 import Image from '@/core/components/elements/Image/Image';
-import MobileView from '@/core/components/views/MobileView';
-import DesktopView from '@/core/components/views/DesktopView';
-import ExpedisiList from '../api/ExpedisiList';
-import whatsappUrl from '@/core/utils/whatsappUrl';
+import Link from '@/core/components/elements/Link/Link';
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
-import { useQuery } from 'react-query';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import useAuth from '@/core/hooks/useAuth';
+import { getItemAddress } from '@/core/utils/address';
+import { deleteItemCart } from '@/core/utils/cart';
+import currencyFormat from '@/core/utils/currencyFormat';
+import getFileBase64 from '@/core/utils/getFileBase64';
 import { gtagPurchase } from '@/core/utils/googleTag';
-import { findVoucher, getVoucher } from '../api/getVoucher';
-import { Spinner } from '@chakra-ui/react';
-import { AnimatePresence, motion } from 'framer-motion';
-import snakecaseKeys from 'snakecase-keys';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import addressesApi from '@/lib/address/api/addressesApi';
 import CartItem from '~/modules/cart/components/Item.tsx';
+import ExpedisiList from '../api/ExpedisiList';
+import { findVoucher, getVoucher } from '../api/getVoucher';
 
 const SELF_PICKUP_ID = 32;
 
@@ -773,7 +773,10 @@ const Checkout = () => {
           <PickupAddress label='Alamat Pickup' />
         )}
         {selectedCarrierId != SELF_PICKUP_ID && (
-          <>
+          <Skeleton
+            isLoaded={!!selectedAddress.invoicing && !!selectedAddress.shipping}
+            minHeight={320}
+          >
             <SectionAddress
               address={selectedAddress.shipping}
               label='Alamat Pengiriman'
@@ -785,7 +788,7 @@ const Checkout = () => {
               label='Alamat Penagihan'
               url='/my/address?select=invoice'
             />
-          </>
+          </Skeleton>
         )}
         <Divider />
         <SectionValidation address={selectedAddress.invoicing} />
@@ -1056,7 +1059,12 @@ const Checkout = () => {
                 <PickupAddress label='Alamat Pickup' />
               )}
               {selectedCarrierId != SELF_PICKUP_ID && (
-                <>
+                <Skeleton
+                  isLoaded={
+                    !!selectedAddress.invoicing && !!selectedAddress.shipping
+                  }
+                  minHeight={290}
+                >
                   <SectionAddress
                     address={selectedAddress.shipping}
                     label='Alamat Pengiriman'
@@ -1068,7 +1076,7 @@ const Checkout = () => {
                     label='Alamat Penagihan'
                     url='/my/address?select=invoice'
                   />
-                </>
+                </Skeleton>
               )}
               <Divider />
               <SectionValidation address={selectedAddress.invoicing} />