fix lint, clean up ask-fern loader

Author: sbawabe

packages/fern-dashboard/src/app/[orgName]/(homepage)/docs/[docsUrl]/ask-fern/loading.tsx

@@ -1,63 +1,5 @@
 import { Skeleton } from "@/components/ui/skeleton";
-import { cn } from "@/utils/utils";
-
-const BORDER_STYLES = "mb-4 flex w-full flex-col items-center rounded-2xl p-4";
 
 export default function Loading() {
-    return (
-        <div className="flex min-w-0 flex-1 flex-col items-center transition-[flex] duration-500 ease-out">
-            {/* Page Header Skeleton */}
-            <div className="mb-4 flex w-full max-w-[1200px] items-center justify-between">
-                <Skeleton className="h-8 w-32" />
-            </div>
-
-            {/* Main Content Card Skeleton */}
-            <div className={cn(BORDER_STYLES, "border-gray-0 w-full max-w-[1200px] border")}>
-                {/* Time Range Selector Skeleton */}
-                <div className="mb-6 flex w-full items-center justify-between">
-                    <Skeleton className="h-7 w-32" />
-                    <Skeleton className="h-9 w-32" />
-                </div>
-
-                {/* Metrics Cards Skeleton */}
-                <div className="mb-6 flex w-full gap-6">
-                    {Array.from({ length: 4 }).map((_, i) => (
-                        <div key={i} className="flex flex-1 flex-col items-start">
-                            <Skeleton className="mb-1 h-5 w-20" />
-                            <Skeleton className="h-7 w-16" />
-                        </div>
-                    ))}
-                </div>
-
-                {/* Histogram Chart Skeleton */}
-                <div className="mb-6 w-full overflow-x-auto">
-                    <div className="flex h-[200px] items-end gap-2">
-                        {Array.from({ length: 20 }).map((_, i) => (
-                            <Skeleton
-                                key={i}
-                                className="flex-1"
-                                style={{ height: `${Math.random() * 100 + 50}px` }}
-                            />
-                        ))}
-                    </div>
-                </div>
-
-                {/* Search Bar and Pagination Skeleton */}
-                <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
-                    <Skeleton className="h-9 w-64" />
-                    <Skeleton className="h-9 w-32" />
-                </div>
-
-                {/* Table Skeleton */}
-                <div className="flex flex-col gap-2">
-                    {/* Table Header */}
-                    <Skeleton className="h-10 w-full" />
-                    {/* Table Rows */}
-                    {Array.from({ length: 8 }).map((_, i) => (
-                        <Skeleton key={i} className="h-12 w-full" />
-                    ))}
-                </div>
-            </div>
-        </div>
-    );
+    return <Skeleton className="h-full w-full" />;
 }

packages/fern-dashboard/src/app/[orgName]/(homepage)/docs/[docsUrl]/search/loading.tsx

@@ -37,7 +37,10 @@ function SearchTableSkeleton({ title }: { title: string }) {
             </div>
             <div className="flex flex-col">
                 {[...Array(10)].map((_, i) => (
-                    <div key={i} className="border-border flex items-center justify-between border-b px-4 py-3 last:border-b-0">
+                    <div
+                        key={i}
+                        className="border-border flex items-center justify-between border-b px-4 py-3 last:border-b-0"
+                    >
                         <Skeleton className="h-4 w-48" />
                         <Skeleton className="h-4 w-16" />
                     </div>

packages/fern-dashboard/src/app/[orgName]/(homepage)/docs/[docsUrl]/web-analytics/loading.tsx

@@ -72,13 +72,18 @@ export default function Loading() {
 
 function TableSkeleton({ title, fullWidth = false }: { title: string; fullWidth?: boolean }) {
     return (
-        <div className={`border-border flex flex-col rounded-lg border bg-white dark:bg-transparent ${fullWidth ? "w-full" : "flex-1"}`}>
+        <div
+            className={`border-border flex flex-col rounded-lg border bg-white dark:bg-transparent ${fullWidth ? "w-full" : "flex-1"}`}
+        >
             <div className="border-border flex items-center justify-between border-b px-4 py-3">
                 <Skeleton className="h-5 w-32">{title}</Skeleton>
             </div>
             <div className="flex flex-col">
                 {[...Array(5)].map((_, i) => (
-                    <div key={i} className="border-border flex items-center justify-between border-b px-4 py-3 last:border-b-0">
+                    <div
+                        key={i}
+                        className="border-border flex items-center justify-between border-b px-4 py-3 last:border-b-0"
+                    >
                         <Skeleton className="h-4 w-40" />
                         <div className="flex gap-8">
                             <Skeleton className="h-4 w-16" />

packages/fern-dashboard/src/components/analytics/AnalyticsPageClient.tsx

@@ -173,7 +173,7 @@ export function AnalyticsPageClient({
         <div className={ANALYTICS_PAGE_STYLES}>
             <AnalyticsPageHeader analyticsBillingEnabled={analyticsBillingEnabled} />
             {isLoading ? (
-                <div className={cn(BORDER_STYLES, "border-gray-0 w-full max-w-[1200px] border")}>
+                <div className={cn(BORDER_STYLES, "border-border w-full max-w-[1200px] border")}>
                     <div className="mb-6 flex w-full items-center justify-between">
                         <Skeleton className="h-7 w-32" />
                         <Skeleton className="h-9 w-32" />