load data client side

src/routes/+page.svelte

@@ -3,7 +3,7 @@
 	import InfiniteScroll from "svelte-infinite-scroll";
 	import { page } from "$app/stores";
 
-	import { goto, invalidate } from "$app/navigation";
+	import { goto } from "$app/navigation";
 	import Button from "$lib/components/Button.svelte";
 	import Card from "$lib/components/models/Card.svelte";
 	import Input from "$lib/components/fields/Input.svelte";
@@ -13,42 +13,55 @@
 	import Dialog from "$lib/components/dialog/Dialog.svelte";
 	import SubmitModel from "$lib/components/models/Submit.svelte";
 	import Drawer from "$lib/components/models/drawer/Drawer.svelte";
+	import { onMount } from "svelte";
+	import type { ModelCard } from "$lib/type";
 
-	export let data
-
-	$: form = {
-		filter: data?.filter,
-		search: data?.search,
+	let data: {
+		models: ModelCard[],
+		total_items: number,
+	} = {
+		models: [],
+		total_items: 0,
+	}
+	let form: Record<string, string> = {
+		filter: $page.url.searchParams.get('filter') ?? "hotest",
+		search: "",
+		page: "0"
 	}
-	let current_page = "0";
 	let submitModelDialog = false;
 
+	onMount(() => {
+		refetch(false);
+	});
+
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;
 
 	const handleFetchMore = async () => {
-		current_page = (Number(current_page) + 1).toString();
+		form.page = (Number(form.page) + 1).toString();
 		refetch(true);
 	}
 	const handleChangeFilter = async (filter: string) => {
+		form.filter = filter;
 		$page.url.searchParams.set('filter', filter);
 		await goto(`?${$page.url.searchParams.toString()}`);
-		await invalidate(url => url.pathname.includes("/api/models"));
+		refetch(false);
 	}
 	let timeout: any;
 	const handleChangeSearch = async (search: string) => {
 		clearTimeout(timeout);
+		form.search = search;
 		timeout = setTimeout(async () => {
 			if (search === "") $page.url.searchParams.delete('search');
 			else $page.url.searchParams.set('search', search);
 			await goto(`?${$page.url.searchParams.toString()}`);
-			await invalidate(url => url.pathname.includes("/api/models"));
+			refetch(false);
 		}, 500);
 	}
 	
 	const refetch = async (add: boolean) => {
-		const request = await fetch(`/api/models?${new URLSearchParams({...form, page: current_page })}`);
+		const request = await fetch(`/api/models?${new URLSearchParams({...form })}`);
 		const response = await request.json();
-		if (add) data = {...data, models: [...data.models, ...response.cards]};
+		if (add) data.models = [...data.models, ...response.cards] as any[];
 		else {
 			data.models = response.cards;
 			data.total_items = response.total_items;

src/routes/+page.ts

@@ -3,8 +3,6 @@ import { modelStore } from "$lib/stores/use-model";
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ fetch, url }) {
   const model_param = url.searchParams.get("model")
-  const search_param = url.searchParams.get("search") ?? undefined
-  const filter_param = url.searchParams.get("filter") ?? "hotest"
   
   if (model_param) {
     const model_request = await fetch(`/api/models/${model_param?.replace("/", "@")}?full=true`, {
@@ -19,18 +17,6 @@ export async function load({ fetch, url }) {
       open: true
     });
   }
-
-  const response = await fetch(`/api/models${url.search}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json"
-    }
-  })
-  const models = await response.json()
   return {
-    models: models?.cards ?? [],
-    total_items: models?.total_items ?? 0,
-    search: search_param ?? "",
-    filter: filter_param,
   }
 }

src/routes/gallery/+page.svelte

@@ -11,9 +11,17 @@
 	import GalleryDrawer from "$lib/components/community/drawer/Drawer.svelte";
 	import { get } from "svelte/store";
 	import { userStore } from "$lib/stores/use-user";
+	import { onMount } from "svelte";
+	import type { CommunityCard } from "$lib/type";
 
-	export let data
 	let user = get(userStore);
+	let data: {
+		cards: CommunityCard[],
+		total_items: number,
+	} = {
+		cards: [],
+		total_items: 0,
+	}
 
 	let form = {
 		filter: "new",
@@ -21,6 +29,10 @@
 		search: ""
 	}
 
+	onMount(() => {
+		refetch(false);
+	});
+
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;
 
 	const handleFetchMore = async () => {

src/routes/gallery/+page.ts

@@ -1,10 +0,0 @@
-export async function load({ fetch }) {
-  const response = await fetch("/api/community?page=0&filter=new", {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json"
-    }
-  })
-  const data = await response.json()
-  return data
-}