Feat/832 empty state no run templates

src/app/snapshots/page.content.tsx

@@ -3,6 +3,13 @@ import { SnapshotTableToolbar } from "@/components/pipeline-snapshots/list/toolb
 import { useSnapshotListQueryParams } from "@/components/pipeline-snapshots/list/use-queryparams";
 import { PipelineSnapshotListQueryParams } from "@/types/pipeline-snapshots";
 import { useGlobalSnapshotColumns } from "./columns";
+import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots";
+import { useQuery } from "@tanstack/react-query";
+import EmptySnapshots from "@/assets/illustrations/empty-snapshots.svg?react";
+import { Button } from "@zenml-io/react-component-library";
+import Plus from "@/assets/icons/plus.svg?react";
+import { Link } from "react-router-dom";
+import { routes } from "@/router/routes";
 
 export function GlobalSnapshotsContent() {
 	const columns = useGlobalSnapshotColumns();
@@ -13,10 +20,49 @@ export function GlobalSnapshotsContent() {
 		sort_by: "desc:updated"
 	};
 
+	const { data, isPending, isError } = useQuery({
+		// empty params since we want to check if there are any results regardless of the search filter.
+		...pipelineSnapshotQueries.list({ named_only: true }),
+		throwOnError: true
+	});
+
+	if (isPending) {
+		return null;
+	}
+
+	if (isError) {
+		return <div>Error loading snapshots</div>;
+	}
+
+	if (data.items.length === 0) {
+		return <EmptyState />;
+	}
+
 	return (
 		<>
 			<SnapshotTableToolbar displayCreateButton params={searchParams} />
 			<PipelineSnapshotsTable params={searchParams} columns={columns} />
 		</>
 	);
 }
+
+function EmptyState() {
+	return (
+		<div className="flex h-full flex-col items-center justify-center gap-5">
+			<EmptySnapshots />
+			<h2 className="text-display-xs font-semibold">No Snapshots Available</h2>
+			<div className="text-center text-theme-text-secondary">
+				<p>It looks like there are no snapshots created yet.</p>
+				<p>Run a pipeline in a remote stack to get started.</p>
+			</div>
+			<div className="flex justify-center">
+				<Button className="whitespace-nowrap" asChild size="md">
+					<Link to={routes.projects.snapshots.create}>
+						<Plus className="h-5 w-5 shrink-0 fill-white" />
+						<span>Create Snapshot</span>
+					</Link>
+				</Button>
+			</div>
+		</div>
+	);
+}