admin/metatron-open-seo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): proper loading states for rank tracking list, detail, and dashboard cards (#419)

Browse Source
This commit is contained in:
Ben Senescu 2026-07-23 09:39:28 -04:00 committed by Ben Senescu
parent 67ed8d3c77
commit a16fbd17a8
3 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/client/features/dashboard/DashboardPage.tsx
View File

@ -276,7 +276,10 @@ export function DashboardPage({ projectId }: { projectId: string }) {
); );
} }
if (!activation) { // Wait for the overview too: rendering cards from `overview === undefined`
// flashes their empty states (and reshuffles the data-first sort) once the
// real data lands. An overview error falls through so the page still loads.
if (!activation || overviewQuery.isPending) {
return ( return (
<div <div
className="mx-auto flex max-w-5xl flex-col gap-5 px-4 py-4 md:px-6 md:py-6" className="mx-auto flex max-w-5xl flex-col gap-5 px-4 py-4 md:px-6 md:py-6"

13
src/client/features/rank-tracking/RankTrackingDomainList.tsx
View File

@ -50,7 +50,7 @@ export function RankTrackingDomainList({
const [filters, setFilters] = useState<DomainListFilters>( const [filters, setFilters] = useState<DomainListFilters>(
EMPTY_DOMAIN_LIST_FILTERS, EMPTY_DOMAIN_LIST_FILTERS,
); );
const { data: summaries } = useQuery({ const { data: summaries, isPending } = useQuery({
queryKey: ["rankTrackingConfigSummaries", projectId], queryKey: ["rankTrackingConfigSummaries", projectId],
queryFn: () => getRankTrackingConfigSummaries({ data: { projectId } }), queryFn: () => getRankTrackingConfigSummaries({ data: { projectId } }),
}); });
@ -106,7 +106,16 @@ export function RankTrackingDomainList({
/> />
)} )}
<div className="divide-y divide-base-300 border-t border-base-300"> <div className="divide-y divide-base-300 border-t border-base-300">
{allSummaries.length === 0 ? ( {isPending ? (
<div className="space-y-4 px-5 py-4" aria-busy>
{Array.from({ length: 3 }).map((_, index) => (
<div key={index} className="space-y-2">
<div className="skeleton h-4 w-48" />
<div className="skeleton h-3 w-72" />
</div>
))}
</div>
) : allSummaries.length === 0 ? (
<div className="px-5 py-10 text-center space-y-2"> <div className="px-5 py-10 text-center space-y-2">
<div className="mx-auto flex size-10 items-center justify-center rounded-xl bg-base-200"> <div className="mx-auto flex size-10 items-center justify-center rounded-xl bg-base-200">
<Globe className="size-5 text-base-content/40" /> <Globe className="size-5 text-base-content/40" />

10
src/routes/_project/p/$projectId/rank-tracking/$configId.tsx
View File

@ -17,7 +17,7 @@ function RankTrackingConfigRoute() {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const [showConfigModal, setShowConfigModal] = useState(false); const [showConfigModal, setShowConfigModal] = useState(false);
const { data: configs, isLoading } = useQuery({ const { data: configs, isPending } = useQuery({
queryKey: ["rankTrackingConfigs", projectId], queryKey: ["rankTrackingConfigs", projectId],
queryFn: () => getRankTrackingConfigs({ data: { projectId } }), queryFn: () => getRankTrackingConfigs({ data: { projectId } }),
}); });
@ -40,7 +40,13 @@ function RankTrackingConfigRoute() {
}); });
}; };
if (isLoading) return null; if (isPending) {
return (
<div className="flex items-center justify-center py-20">
<span className="loading loading-spinner loading-lg" />
</div>
);
}
if (!config) { if (!config) {
return ( return (