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 ( } @@ -145,7 +149,7 @@ export function SupportCaseDetailView({ caseId }: SupportCaseDetailViewProps) { icon={} 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={} 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 ( } title="Support Center" description="Get help with your account and services" - loading={isLoading} + loading={showLoading} error={error} onRetry={() => void refetch()} >