perf: use loadMore server action and Await for large data loads

website-frontend/src/lib/components/banners/PeopleBanner.svelte

@@ -65,13 +65,13 @@
 				<div
 					class="flex flex-col items-center justify-center text-center lg:flex-row lg:justify-between"
 				>
-					<div class="flex space-x-2 text-[#D9D9D9]">
-						<p>{position}</p>
+					<span class="text-[#D9D9D9]">
+						{position}
 						{#if laboratory}
-							<p>·</p>
-							<p>{laboratory}</p>
+							·
+							{laboratory}
 						{/if}
-					</div>
+					</span>
 
 					<div class="mt-5 flex space-x-1 lg:mt-0">
 						<div class="group relative">

website-frontend/src/lib/components/cards/FeaturedEventCard.svelte

@@ -2,7 +2,6 @@
 	import { PUBLIC_APIURL } from '$env/static/public';
 	import { Event } from '$lib/models/events';
 	import { Calendar, MapPin, Clock, Image } from 'lucide-svelte';
-	import { reloading } from '$lib/stores';
 	export let item: Event;
 	let hero_height: number;
 
@@ -38,13 +37,7 @@
 	}
 </script>
 
-<a
-	href="/events/{item.slug}"
-	data-sveltekit-reload
-	on:click={() => {
-		$reloading = true;
-	}}
->
+<a href="/events/{item.slug}" data-sveltekit-reload>
 	<div
 		class="group relative mb-2 flex h-[25rem] flex-col rounded-lg bg-white text-gray-800 shadow-md"
 	>

website-frontend/src/lib/components/cards/NewsCard.svelte

@@ -3,7 +3,6 @@
 	import { NewsItem } from '$lib/models/news';
 	import { Image } from 'lucide-svelte';
 	import { error } from '@sveltejs/kit';
-	import { reloading } from '$lib/stores';
 
 	export let item: NewsItem;
 	const news_tags =
@@ -17,13 +16,7 @@
 	let banner_height: number;
 </script>
 
-<a
-	href="/news/{item.slug}"
-	data-sveltekit-reload
-	on:click={() => {
-		$reloading = true;
-	}}
->
+<a href="/news/{item.slug}" data-sveltekit-reload>
 	<div
 		class="group relative mb-2 flex h-[25rem] flex-col rounded-lg bg-white text-gray-800 shadow-md"
 	>

website-frontend/src/lib/components/cards/PublicationCard.svelte

@@ -5,7 +5,6 @@
 	import { PUBLIC_APIURL } from '$env/static/public';
 	import { Publication } from '$lib/models/publications';
 	import { SquareArrowOutUpRight } from 'lucide-svelte';
-	import { reloading } from '$lib/stores';
 
 	export let item: Publication;
 
@@ -85,33 +84,29 @@
 						</div>
 					{/if}
 					{#if item.authors}
-						{#if item.authors.length !== 1}
-							<strong>Authors:</strong>
-						{:else}
-							<strong>Author:</strong>
-						{/if}
-						{#each item.authors as author, i}
-							{#if author.link && typeof author.link === 'string'}
-								<a
-									href={author.link}
-									class="text-blue-500"
-									data-sveltekit-reload
-									on:click={() => {
-										$reloading = true;
-									}}
-									>{`${author.last_name}, ${author.first_name}`}
-								</a>
+						<div class="text-start">
+							{#if item.authors.length !== 1}
+								<strong>Authors:</strong>
 							{:else}
-								<span>{`${author.last_name}, ${author.first_name}`}</span>
-							{/if}
-							{#if i + 1 !== item.authors.length}
-								<span>{` & `}</span>
+								<strong>Author:</strong>
 							{/if}
-						{/each}
+							{#each item.authors as author, i}
+								{#if author.link && typeof author.link === 'string'}
+									<a href={author.link} class="text-blue-500" data-sveltekit-reload
+										>{`${author.last_name}, ${author.first_name}`}
+									</a>
+								{:else}
+									<span>{`${author.last_name}, ${author.first_name}`}</span>
+								{/if}
+								{#if i + 1 !== item.authors.length}
+									<span>{` & `}</span>
+								{/if}
+							{/each}
+						</div>
 					{/if}
 				</div>
 				{#if item.abstract}
-					<div class="text-start">
+					<div class="line-clamp-[20] text-start">
 						<small><strong>Abstract:</strong> {item.abstract}</small>
 					</div>
 				{/if}

website-frontend/src/lib/components/list_items/LaboratoryItem.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
 	import { Image } from 'lucide-svelte';
 	import { PUBLIC_APIURL } from '$env/static/public';
-	import { reloading } from '$lib/stores';
 
 	export let laboratory;
 	let logo_height: number;
 
 	$: ({ name, logo, description, slug } = laboratory);
 </script>
 
-<a
-	href="/research/labs/{slug}"
-	data-sveltekit-reload
-	on:click={() => {
-		$reloading = true;
-	}}
->
+<a href="/research/labs/{slug}" data-sveltekit-reload>
 	<div
 		class="my-4 flex flex-col justify-center gap-6 rounded-lg p-10 text-center text-background md:flex-row md:justify-start md:text-start"
 		style="background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary)/0.25)); grid-template-columns: 1fr auto;"

website-frontend/src/lib/components/list_items/OrganizationItem.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
 	import { Image } from 'lucide-svelte';
 	import { PUBLIC_APIURL } from '$env/static/public';
-	import { reloading } from '$lib/stores';
 
 	export let organization;
 	let logo_height: number;
 
 	$: ({ name, logo, description, website, slug } = organization);
 </script>
 
-<a
-	href="/students/organizations/{slug}"
-	data-sveltekit-reload
-	on:click={() => {
-		$reloading = true;
-	}}
->
+<a href="/students/organizations/{slug}" data-sveltekit-reload>
 	<div
 		class="my-4 flex flex-col justify-center gap-6 rounded-lg p-10 text-center text-background md:flex-row md:justify-start md:text-start"
 		style="background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--primary)/0.25)); grid-template-columns: 1fr auto;"

website-frontend/src/lib/components/loading/Await.svelte

@@ -1,28 +1,30 @@
 <script lang="ts">
 	/** @type {import('./$types').PageData} */
 	import { Moon } from 'svelte-loading-spinners';
-	import { ChevronsUp, Frown, Plus } from 'lucide-svelte';
+	import { Frown, Plus } from 'lucide-svelte';
+	import { enhance } from '$app/forms';
 	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
+	import { type ActionResult } from '@sveltejs/kit';
 
 	export let onDark = false;
-	export let layout;
-	export let data;
+	export let layout = '';
+	export let data: Promise<object[]>;
 	export let text;
 	export let component;
 	export let count;
-	export let limit: number;
 
+	let items: object[] = [];
 	$: query = new URLSearchParams($page.url.searchParams.toString());
-	$: currentLimit = parseInt(query.get('limit') ?? limit.toString());
+	$: data.then((res) => (items = res));
 
-	function nav(newLimit: number): void {
-		query.delete('limit');
-		if (newLimit > limit) {
-			query.append('limit', newLimit.toString());
-		}
-		goto(`?${query.toString()}`, { noScroll: true, keepFocus: true });
-	}
+	const handleLoadMore = ({ formData }: { formData: FormData }) => {
+		formData.set('data', JSON.stringify(items));
+		return async ({ result }: { result: ActionResult }) => {
+			if (result.type === 'success' && result.data) {
+				items = result.data.items;
+			}
+		};
+	};
 </script>
 
 <div class="flex flex-col gap-y-2">
@@ -38,42 +40,30 @@
 				Loading {text}...
 			</p>
 		</div>
-	{:then data}
+	{:then}
 		<div class={layout}>
-			{#each data as item}
+			{#each items as item}
 				<svelte:component this={component} {item} />
 			{/each}
 		</div>
 		<div class="flex flex-col items-center gap-2">
 			<div class="flex items-center justify-center gap-1">
-				{#if data.length < count}
-					<button
-						class="flex items-center rounded-3xl px-6 py-2 shadow-xl"
-						on:click={() => nav(currentLimit + limit)}
-					>
-						<Plus color={onDark ? 'hsl(0, 0%, 100%)' : 'hsl(144, 69%, 24%)'} class="mr-2 h-4 w-4" />
-						<span class={onDark ? 'text-[hsl(0, 0%, 100%)]' : 'text-[hsl(144, 69%, 24%)]'}
-							>Load More</span
-						>
-					</button>
-				{/if}
-				{#if data.length > limit}
-					<button
-						class="flex items-center rounded-3xl px-6 py-2 shadow-xl"
-						on:click={() => nav(limit)}
-					>
-						<ChevronsUp
-							color={onDark ? 'hsl(0, 0%, 100%)' : 'hsl(144, 69%, 24%)'}
-							class="mr-2 h-4 w-4"
-						/>
-						<span class={onDark ? 'text-[hsl(0, 0%, 100%)]' : 'text-[hsl(144, 69%, 24%)]'}
-							>Collapse</span
-						>
-					</button>
+				{#if items.length < count}
+					<form method="POST" action="?/loadMore&{query.toString()}" use:enhance={handleLoadMore}>
+						<button type="submit" class="flex items-center rounded-3xl px-6 py-2 shadow-xl">
+							<Plus
+								color={onDark ? 'hsl(0, 0%, 100%)' : 'hsl(144, 69%, 24%)'}
+								class="mr-2 h-4 w-4"
+							/>
+							<span class={onDark ? 'text-[hsl(0, 0%, 100%)]' : 'text-[hsl(144, 69%, 24%)]'}
+								>Load More</span
+							>
+						</button>
+					</form>
 				{/if}
 			</div>
 			<small class={onDark ? 'text-[hsl(0, 0%, 100%)]' : 'text-[hsl(144, 69%, 24%)]'}
-				>Showing {Math.min(currentLimit, count)} items out of {count}</small
+				>Showing {items.length} items out of {count}</small
 			>
 		</div>
 	{:catch}

website-frontend/src/lib/components/search/EventsSearchResult.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { PUBLIC_APIURL } from '$env/static/public';
+	import { Event } from '$lib/models/events';
+
+	export let item: Event;
+
+	let general_banner_height: number;
+</script>
+
+<a href={`/events/${item.slug}`}>
+	<div
+		class="flex flex-col items-center justify-start gap-2 border-b py-5 text-center sm:flex-row sm:text-start"
+	>
+		{#if item.hero_image}
+			<div
+				class="flex h-36 w-full flex-col items-center justify-center overflow-hidden rounded-lg p-2 shadow-none md:w-2/5"
+				bind:clientHeight={general_banner_height}
+			>
+				{#if general_banner_height}
+					<img
+						src="{PUBLIC_APIURL}/assets/{item.hero_image}?height={general_banner_height}"
+						alt={item.event_headline}
+						class="h-full w-full rounded-lg object-cover"
+					/>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="w-full">
+			<p class="text-xl font-bold">{item.event_headline}</p>
+			{#if item.event_content}
+				<p class="line-clamp-2">{@html item.event_content}</p>
+			{/if}
+		</div>
+	</div>
+</a>

website-frontend/src/lib/components/search/LaboratoriesSearchResult.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { PUBLIC_APIURL } from '$env/static/public';
+	import { Laboratory } from '$lib/models/laboratories';
+
+	export let item: Laboratory;
+
+	let general_banner_height: number;
+</script>
+
+<a href={`/research/labs/${item.slug}`}>
+	<div
+		class="flex flex-col items-center justify-start gap-2 border-b py-5 text-center sm:flex-row sm:text-start"
+	>
+		{#if item.logo}
+			<div
+				class="flex h-36 w-full flex-col items-center justify-center overflow-hidden rounded-lg p-2 shadow-none md:w-2/5"
+				bind:clientHeight={general_banner_height}
+			>
+				{#if general_banner_height}
+					<img
+						src="{PUBLIC_APIURL}/assets/{item.logo}?height={general_banner_height}"
+						alt={item.name}
+						class="h-full w-full rounded-lg object-cover"
+					/>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="w-full">
+			<p class="text-xl font-bold">{item.name}</p>
+			{#if item.brief_description}
+				<p class="line-clamp-2">{item.brief_description}</p>
+			{/if}
+		</div>
+	</div>
+</a>

website-frontend/src/lib/components/search/NewsSearchResult.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { PUBLIC_APIURL } from '$env/static/public';
+	import { NewsItem } from '$lib/models/news';
+
+	export let item: NewsItem;
+
+	let general_banner_height: number;
+</script>
+
+<a href={`/news/${item.slug}`}>
+	<div
+		class="flex flex-col items-center justify-start gap-2 border-b py-5 text-center sm:flex-row sm:text-start"
+	>
+		{#if item.background_image}
+			<div
+				class="flex h-36 w-full flex-col items-center justify-center overflow-hidden rounded-lg p-2 shadow-none md:w-2/5"
+				bind:clientHeight={general_banner_height}
+			>
+				{#if general_banner_height}
+					<img
+						src="{PUBLIC_APIURL}/assets/{item.background_image}?height={general_banner_height}"
+						alt={item.title}
+						class="h-full w-full rounded-lg object-cover"
+					/>
+				{/if}
+			</div>
+		{/if}
+
+		<div class="w-full">
+			<p class="text-xl font-bold">{item.title}</p>
+			{#if item.summary}
+				<p class="line-clamp-2">{item.summary}</p>
+			{/if}
+		</div>
+	</div>
+</a>