diff --git a/.changeset/thirty-mammals-live.md b/.changeset/thirty-mammals-live.md
new file mode 100644
index 000000000000..0d540a9ff013
--- /dev/null
+++ b/.changeset/thirty-mammals-live.md
@@ -0,0 +1,7 @@
+---
+"@cloudflare/local-explorer-ui": patch
+---
+
+Refactors KV & sidebar to use route loaders.
+
+This change improves the user experience of the Local Explorer dashboard by ensuring that the data used for the initial render is fetched server-side and passed down to the client. This avoids the initial flicker when loading in. Both D1 & Durable Object routes already incorporate this system.
diff --git a/packages/local-explorer-ui/src/components/Sidebar.tsx b/packages/local-explorer-ui/src/components/Sidebar.tsx
index 3c6025c7dfa9..830f1c38e51f 100644
--- a/packages/local-explorer-ui/src/components/Sidebar.tsx
+++ b/packages/local-explorer-ui/src/components/Sidebar.tsx
@@ -26,7 +26,6 @@ interface SidebarItemGroupProps {
 			to: FileRouteTypes["to"];
 		};
 	}>;
-	loading: boolean;
 	title: string;
 }
 
@@ -35,7 +34,6 @@ function SidebarItemGroup({
 	error,
 	icon: Icon,
 	items,
-	loading,
 	title,
 }: SidebarItemGroupProps): JSX.Element {
 	return (
@@ -51,17 +49,11 @@ function SidebarItemGroup({
 
 			<Collapsible.Panel className="overflow-hidden transition-[height,opacity] duration-200 ease-out data-starting-style:h-0 data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:opacity-0">
 				<ul className="list-none ml-3 pl-3 space-y-0.5 border-l border-border">
-					{loading ? (
-						<li className="py-1.5 px-2 text-text-secondary text-sm">
-							Loading...
-						</li>
-					) : null}
-
 					{error ? (
 						<li className="py-1.5 px-2 text-danger text-sm">{error}</li>
 					) : null}
 
-					{!loading && !error
+					{!error
 						? items.map((item) => (
 								<li key={item.id}>
 									<Link
@@ -81,7 +73,7 @@ function SidebarItemGroup({
 							))
 						: null}
 
-					{!loading && !error && items.length === 0 && (
+					{!error && items.length === 0 && (
 						<li className="py-1.5 px-2 text-text-secondary text-sm italic">
 							{emptyLabel}
 						</li>
@@ -100,7 +92,6 @@ interface SidebarProps {
 	doNamespaces: WorkersNamespace[];
 	kvError: string | null;
 	kvNamespaces: WorkersKvNamespace[];
-	loading: boolean;
 }
 
 export function Sidebar({
@@ -111,7 +102,6 @@ export function Sidebar({
 	doNamespaces,
 	kvError,
 	kvNamespaces,
-	loading,
 }: SidebarProps) {
 	return (
 		<aside className="w-sidebar bg-bg-secondary border-r border-border flex flex-col">
@@ -143,7 +133,6 @@ export function Sidebar({
 						to: "/kv/$namespaceId",
 					},
 				}))}
-				loading={loading}
 				title="KV Namespaces"
 			/>
 
@@ -161,7 +150,6 @@ export function Sidebar({
 						to: "/d1/$databaseId",
 					},
 				}))}
-				loading={loading}
 				title="D1 Databases"
 			/>
 
@@ -183,7 +171,6 @@ export function Sidebar({
 						},
 					};
 				})}
-				loading={loading}
 				title="Durable Objects"
 			/>
 		</aside>
diff --git a/packages/local-explorer-ui/src/routes/__root.tsx b/packages/local-explorer-ui/src/routes/__root.tsx
index 50cd4927df16..2d0b36f57e37 100644
--- a/packages/local-explorer-ui/src/routes/__root.tsx
+++ b/packages/local-explorer-ui/src/routes/__root.tsx
@@ -3,7 +3,6 @@ import {
 	Outlet,
 	useRouterState,
 } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
 import {
 	cloudflareD1ListDatabases,
 	durableObjectsNamespaceListNamespaces,
@@ -18,73 +17,65 @@ import type {
 
 export const Route = createRootRoute({
 	component: RootLayout,
-});
+	loader: async () => {
+		const [kvResponse, d1Response, doResponse] = await Promise.allSettled([
+			workersKvNamespaceListNamespaces(),
+			cloudflareD1ListDatabases(),
+			durableObjectsNamespaceListNamespaces(),
+		]);
 
-function RootLayout() {
-	const [loading, setLoading] = useState<boolean>(true);
+		let kvNamespaces = new Array<WorkersKvNamespace>();
+		let kvError: string | null = null;
+		if (kvResponse.status === "fulfilled") {
+			kvNamespaces = kvResponse.value.data?.result ?? [];
+		} else {
+			kvError = `KV Error: ${kvResponse.reason instanceof Error ? kvResponse.reason.message : JSON.stringify(kvResponse.reason)}`;
+		}
 
-	const [kvNamespaces, setKvNamespaces] = useState<WorkersKvNamespace[]>([]);
-	const [kvError, setKvError] = useState<string | null>(null);
+		let databases = new Array<D1DatabaseResponse>();
+		let d1Error: string | null = null;
+		if (d1Response.status === "fulfilled") {
+			databases = d1Response.value.data?.result ?? [];
+		} else {
+			d1Error = `D1 Error: ${d1Response.reason instanceof Error ? d1Response.reason.message : JSON.stringify(d1Response.reason)}`;
+		}
 
-	const [d1Error, setD1Error] = useState<string | null>(null);
-	const [databases, setDatabases] = useState<D1DatabaseResponse[]>([]);
+		let doNamespaces = new Array<WorkersNamespace>();
+		let doError: string | null = null;
+		if (doResponse.status === "fulfilled") {
+			// Only show namespaces that use SQLite storage
+			const allDoNamespaces = doResponse.value.data?.result ?? [];
+			doNamespaces = allDoNamespaces.filter((ns) => ns.use_sqlite === true);
+		} else {
+			doError = `DO Error: ${doResponse.reason instanceof Error ? doResponse.reason.message : JSON.stringify(doResponse.reason)}`;
+		}
 
-	const [doNamespaces, setDoNamespaces] = useState<WorkersNamespace[]>([]);
-	const [doError, setDoError] = useState<string | null>(null);
+		return {
+			d1Error,
+			databases,
+			doError,
+			doNamespaces,
+			kvError,
+			kvNamespaces,
+		};
+	},
+});
 
+function RootLayout() {
+	const loaderData = Route.useLoaderData();
 	const routerState = useRouterState();
 	const currentPath = routerState.location.pathname;
 
-	useEffect(() => {
-		async function fetchData() {
-			const [kvResponse, d1Response, doResponse] = await Promise.allSettled([
-				workersKvNamespaceListNamespaces(),
-				cloudflareD1ListDatabases(),
-				durableObjectsNamespaceListNamespaces(),
-			]);
-
-			if (kvResponse.status === "fulfilled") {
-				setKvNamespaces(kvResponse.value.data?.result ?? []);
-			} else {
-				setKvError(
-					`KV Error: ${kvResponse.reason instanceof Error ? kvResponse.reason.message : JSON.stringify(kvResponse.reason)}`
-				);
-			}
-
-			if (d1Response.status === "fulfilled") {
-				setDatabases(d1Response.value.data?.result ?? []);
-			} else {
-				setD1Error(
-					`D1 Error: ${d1Response.reason instanceof Error ? d1Response.reason.message : JSON.stringify(d1Response.reason)}`
-				);
-			}
-
-			if (doResponse.status === "fulfilled") {
-				// Only show namespaces that use SQLite storage
-				const allDoNamespaces = doResponse.value.data?.result ?? [];
-				setDoNamespaces(allDoNamespaces.filter((ns) => ns.use_sqlite === true));
-			} else {
-				setDoError(
-					`DO Error: ${doResponse.reason instanceof Error ? doResponse.reason.message : JSON.stringify(doResponse.reason)}`
-				);
-			}
-
-			setLoading(false);
-		}
-		void fetchData();
-	}, []);
-
 	return (
 		<div className="flex min-h-screen">
 			<Sidebar
 				currentPath={currentPath}
-				d1Error={d1Error}
-				databases={databases}
-				doError={doError}
-				doNamespaces={doNamespaces}
-				kvError={kvError}
-				kvNamespaces={kvNamespaces}
-				loading={loading}
+				d1Error={loaderData.d1Error}
+				databases={loaderData.databases}
+				doError={loaderData.doError}
+				doNamespaces={loaderData.doNamespaces}
+				kvError={loaderData.kvError}
+				kvNamespaces={loaderData.kvNamespaces}
 			/>
 			<main className="flex-1 overflow-y-auto flex flex-col">
 				<Outlet />
diff --git a/packages/local-explorer-ui/src/routes/do/$className/index.tsx b/packages/local-explorer-ui/src/routes/do/$className/index.tsx
index 2ad10ecb26df..d79e32deea8e 100644
--- a/packages/local-explorer-ui/src/routes/do/$className/index.tsx
+++ b/packages/local-explorer-ui/src/routes/do/$className/index.tsx
@@ -12,7 +12,6 @@ import type { WorkersObject } from "../../../api";
 export const Route = createFileRoute("/do/$className/")({
 	component: NamespaceView,
 	loader: async ({ params }) => {
-		// Resolve className to namespaceId
 		const response = await durableObjectsNamespaceListNamespaces();
 		const namespaces = response.data?.result ?? [];
 		const namespace = namespaces.find(
@@ -25,8 +24,23 @@ export const Route = createFileRoute("/do/$className/")({
 			throw new Error(`Durable Object class "${params.className}" not found`);
 		}
 
+		const objectsResponse = await durableObjectsNamespaceListObjects({
+			path: {
+				id: namespace.id,
+			},
+			query: {
+				limit: 50,
+			},
+		});
+
+		const objects = objectsResponse.data?.result ?? [];
+		const cursor = objectsResponse.data?.result_info?.cursor ?? null;
+
 		return {
+			cursor,
+			hasMore: !!cursor,
 			namespaceId: namespace.id,
+			objects,
 		};
 	},
 });
@@ -36,12 +50,21 @@ function NamespaceView() {
 	const loaderData = Route.useLoaderData();
 	const { namespaceId } = loaderData;
 
-	const [cursor, setCursor] = useState<string | null>(null);
+	const [cursor, setCursor] = useState<string | null>(loaderData.cursor);
 	const [error, setError] = useState<string | null>(null);
-	const [hasMore, setHasMore] = useState<boolean>(false);
-	const [loading, setLoading] = useState<boolean>(true);
+	const [hasMore, setHasMore] = useState<boolean>(loaderData.hasMore);
+	const [loading, setLoading] = useState<boolean>(false);
 	const [loadingMore, setLoadingMore] = useState<boolean>(false);
-	const [objects, setObjects] = useState<WorkersObject[]>([]);
+	const [objects, setObjects] = useState<WorkersObject[]>(loaderData.objects);
+
+	useEffect((): void => {
+		setObjects(loaderData.objects);
+		setCursor(loaderData.cursor);
+		setHasMore(loaderData.hasMore);
+		setError(null);
+		setLoading(false);
+		setLoadingMore(false);
+	}, [loaderData]);
 
 	const fetchObjects = useCallback(
 		async (nextCursor?: string): Promise<void> => {
@@ -87,11 +110,6 @@ function NamespaceView() {
 		[namespaceId]
 	);
 
-	useEffect((): void => {
-		setError(null);
-		void fetchObjects();
-	}, [namespaceId, fetchObjects]);
-
 	function handleLoadMore(): void {
 		if (cursor && !loadingMore) {
 			void fetchObjects(cursor);
diff --git a/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx b/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
index 0a6092e70da9..c48d5165aed0 100644
--- a/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
+++ b/packages/local-explorer-ui/src/routes/kv/$namespaceId.tsx
@@ -18,6 +18,43 @@ import type { KVEntry } from "../../api";
 
 export const Route = createFileRoute("/kv/$namespaceId")({
 	component: NamespaceView,
+	loader: async ({ params }) => {
+		const keysResponse = await workersKvNamespaceListANamespace_SKeys({
+			path: { namespace_id: params.namespaceId },
+			query: { limit: 50 },
+		});
+		const keys = keysResponse.data?.result ?? [];
+
+		let values: Record<string, string | null> = {};
+		if (keys.length > 0) {
+			const valuesResponse = await workersKvNamespaceGetMultipleKeyValuePairs({
+				path: {
+					namespace_id: params.namespaceId,
+				},
+				body: {
+					keys: keys.map((k) => k.name),
+				},
+			});
+			values = (valuesResponse.data?.result?.values ?? {}) as Record<
+				string,
+				string | null
+			>;
+		}
+
+		const cursor = keysResponse.data?.result_info?.cursor ?? null;
+		const entries = keys.map(
+			(key): KVEntry => ({
+				key,
+				value: values[key.name] ?? null,
+			})
+		);
+
+		return {
+			cursor,
+			entries,
+			hasMore: !!cursor,
+		};
+	},
 });
 
 // Helper functions for optimistic entry state updates
@@ -41,29 +78,46 @@ const entryVisible = (entries: KVEntry[], key: string): boolean =>
 
 function NamespaceView() {
 	const { namespaceId } = Route.useParams();
-	const [entries, setEntries] = useState<KVEntry[]>([]);
-	const [loading, setLoading] = useState(true);
+	const loaderData = Route.useLoaderData();
+
+	const [entries, setEntries] = useState<KVEntry[]>(loaderData.entries);
+	const [cursor, setCursor] = useState<string | null>(loaderData.cursor);
+	const [hasMore, setHasMore] = useState(loaderData.hasMore);
+
 	// Global (not individal validation) errors like fetch failures, shown in a
 	// banner. Set by fetchEntries, handleAdd, handleEditSave,
 	// handleConfirmOverwrite, handleConfirmDelete
-	const [error, setError] = useState<string | null>(null);
-	const [cursor, setCursor] = useState<string | null>(null);
-	const [hasMore, setHasMore] = useState(false);
-	const [loadingMore, setLoadingMore] = useState(false);
 	const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
-	const [deleting, setDeleting] = useState(false);
+	const [deleting, setDeleting] = useState<boolean>(false);
+	const [error, setError] = useState<string | null>(null);
+	const [loading, setLoading] = useState<boolean>(false);
+	const [loadingMore, setLoadingMore] = useState<boolean>(false);
 	// State for overwrite confirmation dialog
 	const [overwriteConfirm, setOverwriteConfirm] = useState<{
 		key: string;
 		value: string;
 		originalKey?: string; // undefined for add, set for edit
 	} | null>(null);
-	const [overwriting, setOverwriting] = useState(false);
+	const [overwriting, setOverwriting] = useState<boolean>(false);
 	// Signal to clear AddKVForm after successful overwrite
-	const [clearAddForm, setClearAddForm] = useState(0);
+	const [clearAddForm, setClearAddForm] = useState<number>(0);
 	// Search prefix filter
 	const [prefix, setPrefix] = useState<string | undefined>(undefined);
 
+	useEffect(() => {
+		setEntries(loaderData.entries);
+		setCursor(loaderData.cursor);
+		setHasMore(loaderData.hasMore);
+		setDeleteTarget(null);
+		setDeleting(false);
+		setOverwriteConfirm(null);
+		setOverwriting(false);
+		setError(null);
+		setPrefix(undefined);
+		setLoading(false);
+		setLoadingMore(false);
+	}, [loaderData]);
+
 	const fetchEntries = useCallback(
 		async (nextCursor?: string, prefixParam?: string) => {
 			try {
@@ -120,14 +174,6 @@ function NamespaceView() {
 		[namespaceId]
 	);
 
-	useEffect(() => {
-		setDeleteTarget(null);
-		setOverwriteConfirm(null);
-		setError(null);
-		setPrefix(undefined);
-		void fetchEntries(undefined, undefined);
-	}, [namespaceId, fetchEntries]);
-
 	const handleLoadMore = () => {
 		if (cursor && !loadingMore) {
 			void fetchEntries(cursor, prefix);