fix: loading skeleton mess

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/layout.tsx

@@ -6,7 +6,6 @@ import { useParams, usePathname } from "next/navigation";
 import { useRef } from "react";
 import { toast } from "sonner";
 import NotFound from "@/app/not-found";
-import { Skeleton } from "@/components/ui/skeleton";
 import { useTrackingSetup } from "@/hooks/use-tracking-setup";
 import { useWebsite } from "@/hooks/use-websites";
 import { isAnalyticsRefreshingAtom } from "@/stores/jotai/filterAtoms";
@@ -99,66 +98,11 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 			<div
 				className={`${isAssistantPage ? "min-h-0 flex-1" : "min-h-0 flex-1 overflow-y-auto overscroll-contain"}`}
 			>
-				{!isAssistantPage && isTrackingSetupLoading ? (
-					<div className="space-y-4 p-4">
-						{/* Two DataTables side by side */}
-						<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-							{[1, 2].map((num) => (
-								<div
-									className="overflow-hidden rounded border bg-sidebar"
-									key={`skeleton-table-${num}`}
-								>
-									<div className="p-3">
-										<Skeleton className="h-5 w-32" />
-										<Skeleton className="mt-1 h-3 w-48" />
-									</div>
-									<div className="space-y-2 px-3 pb-3">
-										{Array.from({ length: 5 }).map((_, idx) => (
-											<div
-												className="flex items-center gap-3 rounded bg-muted/20 p-3"
-												key={`row-${num}-${idx}`}
-											>
-												<Skeleton className="size-6 shrink-0 rounded-full" />
-												<div className="flex-1 space-y-1.5">
-													<Skeleton className="h-4 w-3/4" />
-													<Skeleton className="h-3 w-1/2" />
-												</div>
-												<Skeleton className="h-4 w-12" />
-											</div>
-										))}
-									</div>
-								</div>
-							))}
-						</div>
-						{/* Full width DataTable */}
-						<div className="overflow-hidden rounded border bg-sidebar">
-							<div className="p-3">
-								<Skeleton className="h-5 w-40" />
-								<Skeleton className="mt-1 h-3 w-64" />
-								<div className="mt-3 flex gap-2">
-									{[1, 2, 3, 4].map((tab) => (
-										<Skeleton className="h-8 w-20" key={`tab-${tab}`} />
-									))}
-								</div>
-							</div>
-							<div className="space-y-2 px-3 pb-3">
-								{Array.from({ length: 6 }).map((_, idx) => (
-									<div
-										className="flex items-center gap-3 rounded bg-muted/20 p-3"
-										key={`geo-row-${idx}`}
-									>
-										<Skeleton className="size-6 shrink-0 rounded" />
-										<div className="flex-1 space-y-1.5">
-											<Skeleton className="h-4 w-2/3" />
-											<Skeleton className="h-3 w-1/3" />
-										</div>
-										<Skeleton className="h-4 w-16" />
-									</div>
-								))}
-							</div>
-						</div>
-					</div>
-				) : !(isAssistantPage || isTrackingSetupLoading) &&
+				{isAssistantPage ? (
+					children
+				) : websiteData &&
+					!isTrackingSetupLoading &&
+					isTrackingSetup !== null &&
 					isTrackingSetup === false ? (
 					<div className="p-4">
 						<WebsiteTrackingSetupTab websiteId={websiteId} />

apps/dashboard/app/(main)/websites/[id]/page.tsx

@@ -3,34 +3,20 @@
 import type { DynamicQueryFilter } from "@databuddy/shared/types/api";
 import { WarningIcon } from "@phosphor-icons/react";
 import { useAtom } from "jotai";
-import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useCallback } from "react";
 import { Button } from "@/components/ui/button";
 import { useDateFilters } from "@/hooks/use-date-filters";
-import { useTrackingSetup } from "@/hooks/use-tracking-setup";
 import { useWebsite } from "@/hooks/use-websites";
 import {
 	addDynamicFilterAtom,
 	dynamicQueryFiltersAtom,
 	isAnalyticsRefreshingAtom,
 } from "@/stores/jotai/filterAtoms";
-import type {
-	FullTabProps,
-	WebsiteDataTabProps,
-} from "./_components/utils/types";
-import { EmptyState } from "./_components/utils/ui-components";
 import { WebsiteOverviewTab } from "./_components/tabs/overview-tab";
-import { TabLoadingSkeleton } from "./_components/utils/tab-layout";
-
-const WebsiteTrackingSetupTab = dynamic(
-	() =>
-		import("./_components/tabs/tracking-setup-tab").then((mod) => ({
-			default: mod.WebsiteTrackingSetupTab,
-		})),
-	{ loading: () => <TabLoadingSkeleton />, ssr: false }
-);
+import type { FullTabProps } from "./_components/utils/types";
+import { EmptyState } from "./_components/utils/ui-components";
 
 function WebsiteDetailsPage() {
 	const { id } = useParams();
@@ -59,12 +45,6 @@ function WebsiteDetailsPage() {
 		addFilter,
 	};
 
-	const settingsProps: WebsiteDataTabProps = {
-		websiteId: id as string,
-		dateRange,
-		websiteData: data,
-	};
-
 	if (isError || !(isLoading || data)) {
 		return (
 			<div className="select-none py-8">
@@ -88,14 +68,6 @@ function WebsiteDetailsPage() {
 		);
 	}
 
-	if (isLoading === null) {
-		return (
-			<div className="p-4">
-				<TabLoadingSkeleton />
-			</div>
-		);
-	}
-
 	return (
 		<div className="p-4">
 			<WebsiteOverviewTab {...tabProps} />