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.

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={[

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" }]}

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()}
     >