refactor(FE): Lazy-load uniformity details and show spinner

src/components/pages/production/uniformity/detail/UniformityDetail.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
@@ -14,6 +14,9 @@ import { UniformityDetail as UniformityDetailType } from '@/types/api/production
 import { formatDate, formatNumber } from '@/lib/helper';
 import { useUiStore } from '@/stores/ui/ui.store';
 import UniformityDetailsPreview from '@/components/pages/production/uniformity/detail/UniformityDetailsPreview';
+import { UniformityApi } from '@/services/api/uniformity';
+import useSWR from 'swr';
+import { isResponseSuccess } from '@/lib/api-helper';
 import {
   getStatusColor,
   getStatusIndicatorColor,
@@ -33,6 +36,22 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
   const setExpandedDrawerContent = useUiStore(
     (s) => s.setExpandedDrawerContent
   );
+  const [shouldFetchDetails, setShouldFetchDetails] = useState(false);
+  const [hasFetchedDetails, setHasFetchedDetails] = useState(false);
+
+  const { data: uniformityDetailResponse, isLoading } = useSWR(
+    shouldFetchDetails
+      ? `uniformity-detail-${initialValues.id}-with-details`
+      : null,
+    () => UniformityApi.getUniformityDetail(initialValues.id, true)
+  );
+
+  const uniformity_details = useMemo(() => {
+    if (shouldFetchDetails && isResponseSuccess(uniformityDetailResponse)) {
+      return uniformityDetailResponse.data.uniformity_details;
+    }
+    return initialValues.uniformity_details;
+  }, [shouldFetchDetails, uniformityDetailResponse, initialValues]);
 
   const handleApprove = () => {
     router.push(`/production/uniformity?action=approve&id=${initialValues.id}`);
@@ -43,10 +62,15 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
   };
 
   const handleViewUniformityDetails = () => {
+    if (!uniformity_details || uniformity_details.length === 0) {
+      setShouldFetchDetails(true);
+      return;
+    }
+
     setExpandedDrawerContent(
       <UniformityDetailsPreview
         info_umum={initialValues.info_umum}
-        uniformity_details={initialValues.uniformity_details}
+        uniformity_details={uniformity_details}
         uniformityId={initialValues.id}
       />
     );
@@ -56,6 +80,28 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     }, 0);
   };
 
+  useEffect(() => {
+    if (
+      shouldFetchDetails &&
+      uniformity_details &&
+      uniformity_details.length > 0 &&
+      !hasFetchedDetails
+    ) {
+      setExpandedDrawerContent(
+        <UniformityDetailsPreview
+          info_umum={initialValues.info_umum}
+          uniformity_details={uniformity_details}
+          uniformityId={initialValues.id}
+        />
+      );
+
+      setHasFetchedDetails(true);
+      setTimeout(() => {
+        setExpandedDrawerOpen(true);
+      }, 0);
+    }
+  }, [shouldFetchDetails, uniformity_details, hasFetchedDetails]);
+
   useEffect(() => {
     return () => {
       setExpandedDrawerOpen(false);
@@ -154,10 +200,20 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
                 <span>{valueMap[id]}</span>
                 <Tooltip content='Lihat Detail' position='left'>
                   <button
-                    className='p-1 hover:bg-gray-100 rounded cursor-pointer'
+                    className='p-1 hover:bg-gray-100 rounded cursor-pointer disabled:opacity-50'
                     onClick={handleViewUniformityDetails}
+                    disabled={isLoading}
                   >
-                    <Icon icon='mdi:eye-outline' width={18} height={18} />
+                    {isLoading ? (
+                      <Icon
+                        icon='mdi:loading'
+                        width={18}
+                        height={18}
+                        className='animate-spin'
+                      />
+                    ) : (
+                      <Icon icon='mdi:eye-outline' width={18} height={18} />
+                    )}
                   </button>
                 </Tooltip>
               </div>