From c37bdd2b9cb654e8ce02b0d8a4b301344efd97a4 Mon Sep 17 00:00:00 2001
From: barsa <tumurbarsnarantuya@gmail.com>
Date: Mon, 5 Jan 2026 18:39:55 +0900
Subject: [PATCH] Refactor Support Views to Improve Loading State Handling

- Updated SupportCaseDetailView, SupportCasesView, and SupportHomeView to remove direct loading state checks and replace them with a unified `showLoading` variable, enhancing code clarity.
- Adjusted loading prop in PageLayout components to reflect the new loading state logic, ensuring a smoother user experience during data fetching.
---
 .../features/support/views/SupportCaseDetailView.tsx   | 10 +++++++---
 .../src/features/support/views/SupportCasesView.tsx    |  7 +++++--
 .../src/features/support/views/SupportHomeView.tsx     |  7 +++++--
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/portal/src/features/support/views/SupportCaseDetailView.tsx b/apps/portal/src/features/support/views/SupportCaseDetailView.tsx
index fe4fe08b..da693d0b 100644
--- a/apps/portal/src/features/support/views/SupportCaseDetailView.tsx
+++ b/apps/portal/src/features/support/views/SupportCaseDetailView.tsx
@@ -90,7 +90,10 @@ interface SupportCaseDetailViewProps {
 }
 
 export function SupportCaseDetailView({ caseId }: SupportCaseDetailViewProps) {
-  const { data: supportCase, isLoading, error, refetch } = useSupportCase(caseId);
+  const { data: supportCase, error, refetch } = useSupportCase(caseId);
+
+  // Show loading until we have data or an error
+  const showLoading = !supportCase && !error;
   const {
     data: messagesData,
     isLoading: messagesLoading,
@@ -121,7 +124,8 @@ export function SupportCaseDetailView({ caseId }: SupportCaseDetailViewProps) {
     }
   };
 
-  if (!isLoading && !supportCase && !error) {
+  // Case not found - only show after loading is complete
+  if (!showLoading && !supportCase) {
     return (
       <PageLayout
         icon={<TicketIconSolid />}
@@ -145,7 +149,7 @@ export function SupportCaseDetailView({ caseId }: SupportCaseDetailViewProps) {
       icon={<TicketIconSolid />}
       title={supportCase ? `Case #${supportCase.caseNumber}` : "Loading..."}
       description={supportCase?.subject}
-      loading={isLoading}
+      loading={showLoading}
       error={pageError}
       onRetry={() => void refetch()}
       breadcrumbs={[
diff --git a/apps/portal/src/features/support/views/SupportCasesView.tsx b/apps/portal/src/features/support/views/SupportCasesView.tsx
index e62c761b..2af32703 100644
--- a/apps/portal/src/features/support/views/SupportCasesView.tsx
+++ b/apps/portal/src/features/support/views/SupportCasesView.tsx
@@ -51,10 +51,13 @@ export function SupportCasesView() {
     return nextFilters;
   }, [statusFilter, priorityFilter, deferredSearchTerm]);
 
-  const { data, isLoading, error, refetch } = useSupportCases(queryFilters);
+  const { data, error, refetch } = useSupportCases(queryFilters);
   const cases = data?.cases ?? [];
   const summary = data?.summary ?? { total: 0, open: 0, highPriority: 0, resolved: 0 };
 
+  // Show loading until we have data or an error
+  const showLoading = !data && !error;
+
   const hasActiveFilters = statusFilter !== "all" || priorityFilter !== "all" || searchTerm.trim();
 
   const statusFilterOptions = useMemo(
@@ -87,7 +90,7 @@ export function SupportCasesView() {
       icon={<ChatBubbleLeftRightIconSolid />}
       title="Support Cases"
       description="Track and manage your support requests"
-      loading={isLoading}
+      loading={showLoading}
       error={error}
       onRetry={() => void refetch()}
       breadcrumbs={[{ label: "Support", href: "/account/support" }, { label: "Cases" }]}
diff --git a/apps/portal/src/features/support/views/SupportHomeView.tsx b/apps/portal/src/features/support/views/SupportHomeView.tsx
index 3be767bc..4a4207cf 100644
--- a/apps/portal/src/features/support/views/SupportHomeView.tsx
+++ b/apps/portal/src/features/support/views/SupportHomeView.tsx
@@ -21,16 +21,19 @@ import { formatIsoRelative } from "@/shared/utils";
 
 export function SupportHomeView() {
   const router = useRouter();
-  const { data, isLoading, error, refetch } = useSupportCases();
+  const { data, error, refetch } = useSupportCases();
   const recentCases = data?.cases?.slice(0, 5) ?? [];
   const summary = data?.summary ?? { total: 0, open: 0, highPriority: 0, resolved: 0 };
 
+  // Show loading until we have data or an error
+  const showLoading = !data && !error;
+
   return (
     <PageLayout
       icon={<ChatBubbleLeftRightIconSolid />}
       title="Support Center"
       description="Get help with your account and services"
-      loading={isLoading}
+      loading={showLoading}
       error={error}
       onRetry={() => void refetch()}
     >