fix(mapper): get entities after page load to speed up first paint (#2051

) * fix(+page): fetch entity status api after page load for faster page load * fix(main): update default entity color * fix(+page): add type to shapeStream import
hotosm · Jan 13, 2025 · 27d7148 · 27d7148
1 parent b054fe0
commit 27d7148
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
@@ -423,7 +423,7 @@
 					'#fae15f',
 					'SURVEY_SUBMITTED',
 					'#71bf86',
-					'#c5fbf5', // default color if no match is found
+					'#9c9a9a', // default color if no match is found
 				],
 				'fill-outline-color': [
 					'match',
@@ -434,7 +434,7 @@
 					'#ffd603',
 					'SURVEY_SUBMITTED',
 					'#32a852',
-					'#c5fbf5',
+					'#000000',
 				],
 			}}
 			beforeLayerType="symbol"

diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -25,6 +25,9 @@
 	import More from '$lib/components/more/index.svelte';
 	import { getProjectSetupStepStore, getCommonStore } from '$store/common.svelte.ts';
 	import { projectSetupStep as projectSetupStepEnum } from '$constants/enums.ts';
+	import type { ShapeStream } from '@electric-sql/client';
+
+	const API_URL = import.meta.env.VITE_API_URL;
 
 	interface Props {
 		data: PageData;
@@ -44,7 +47,6 @@
 	const commonStore = getCommonStore();
 
 	const taskEventStream = getTaskEventStream(data.projectId);
-	const entityStatusStream = getEntityStatusStream(data.projectId);
 
 	// Update the geojson task states when a new event is added
 	$effect(() => {
@@ -98,19 +100,32 @@
 	}
 
 	onMount(async () => {
-		// In store/entities.ts
-		await entitiesStore.subscribeToEntityStatusUpdates(entityStatusStream, data.entityStatus);
-
 		// In store/tasks.svelte.ts
 		await taskStore.subscribeToEvents(taskEventStream);
 		await taskStore.appendTaskStatesToFeatcol(data.project.tasks);
 	});
 
 	onDestroy(() => {
 		taskEventStream?.unsubscribeAll();
-		entityStatusStream?.unsubscribeAll();
 	});
 
+	$effect(() => {
+		let entityStatusStream: ShapeStream | undefined;
+
+		async function getEntityStatus() {
+			const entityStatusResponse = await fetch(`${API_URL}/projects/${data.projectId}/entities/statuses`, {
+				credentials: 'include',
+			});
+			const response = await entityStatusResponse.json();
+			entityStatusStream = getEntityStatusStream(data.projectId);
+			await entitiesStore.subscribeToEntityStatusUpdates(entityStatusStream, response);
+		}
+
+		getEntityStatus();
+		return () => {
+			entityStatusStream?.unsubscribeAll();
+		};
+	});
 	const projectSetupStepStore = getProjectSetupStepStore();
 
 	$effect(() => {

diff --git a/src/mapper/src/routes/[projectId]/+page.ts b/src/mapper/src/routes/[projectId]/+page.ts
@@ -36,15 +36,11 @@ export const load: PageLoad = async ({ parent, params, fetch }) => {
 	if (projectResponse.status === 404) {
 		throw error(404, { message: `Project with ID (${projectId}) not found` });
 	}
-	const entityStatusResponse = await fetch(`${API_URL}/projects/${projectId}/entities/statuses`, {
-		credentials: 'include',
-	});
 
 	return {
 		project: await projectResponse.json(),
 		projectId: parseInt(projectId),
 		userId: apiUser.id,
-		entityStatus: await entityStatusResponse.json(),
 		// db: db,
 	};
 };