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