improve loading comm and tagger pages

src/components/LatestTagger.svelte

@@ -5,7 +5,7 @@
 
 	export let location: string;
 	export let action: EventType;
-	export let user: User | '';
+	export let user: User | undefined = undefined;
 	export let time: string;
 	export let latest: boolean;
 	export let merchantId: string;

src/components/ProfileStat.svelte

@@ -2,9 +2,9 @@
 	import tippy from 'tippy.js';
 
 	export let title: string;
-	export let stat: number;
-	export let percent: string;
-	export let border: string;
+	export let stat: number | undefined;
+	export let percent: string | undefined = undefined;
+	export let border: string | undefined = undefined;
 	export let tooltip: undefined | string = undefined;
 
 	let tooltipElement: HTMLButtonElement;
@@ -27,7 +27,7 @@
 	</h3>
 
 	<div class="flex justify-center md:justify-start">
-		{#if stat >= 0}
+		{#if stat !== undefined}
 			<span class="text-5xl font-semibold text-primary dark:text-white">{stat}</span>
 			{#if percent}
 				<span class="ml-1 text-lg text-body dark:text-white">({percent}%)</span>

src/lib/types.ts

@@ -15,7 +15,7 @@ export type Area = {
 export type AreaTags = {
 	type: 'community' | 'country';
 	name: string;
-	continent: 'africa' | 'asia' | 'europe' | 'north-america' | 'oceania' | 'south-america';
+	continent: Continents;
 	url_alias: string;
 	geo_json: GeoJSON;
 	['icon:square']: string;
@@ -50,6 +50,14 @@ export type AreaTags = {
 	['box:west']?: string;
 };
 
+export type Continents =
+	| 'africa'
+	| 'asia'
+	| 'europe'
+	| 'north-america'
+	| 'oceania'
+	| 'south-america';
+
 export type Element = {
 	id: string;
 	osm_json: ElementOSM;
@@ -94,25 +102,27 @@ export type Report = {
 	id: number;
 	area_id: string;
 	date: string;
-	tags: {
-		total_elements: number;
-		total_elements_onchain: number;
-		total_elements_lightning: number;
-		total_elements_lightning_contactless: number;
-		total_atms: number;
-		up_to_date_elements: number;
-		up_to_date_percent: number;
-		outdated_elements: number;
-		legacy_elements: number;
-		avg_verification_date: string;
-		grade: Grade;
-	};
+	tags: ReportTags;
 	created_at: string;
 	updated_at: string;
 	deleted_at: string;
 };
 
-export type Grade = 0 | 1 | 2 | 3 | 4 | 5;
+export type ReportTags = {
+	total_elements: number;
+	total_elements_onchain: number;
+	total_elements_lightning: number;
+	total_elements_lightning_contactless: number;
+	total_atms: number;
+	up_to_date_elements: number;
+	up_to_date_percent: number;
+	outdated_elements: number;
+	legacy_elements: number;
+	avg_verification_date: string;
+	grade: Grade;
+};
+
+export type Grade = 1 | 2 | 3 | 4 | 5;
 
 export type User = {
 	id: number;
@@ -203,6 +213,7 @@ export enum TipType {
 export interface ActivityEvent extends Event {
 	location: string;
 	merchantId: string;
+	tagger?: User;
 }
 
 // misc

src/routes/activity/+page.svelte

@@ -30,6 +30,15 @@
 	let elementsLoading: boolean;
 	let supertaggers: ActivityEvent[];
 
+	const findUser = (tagger: Event) => {
+		let foundUser = $users.find((user) => user.id == tagger['user_id']);
+		if (foundUser) {
+			return foundUser;
+		} else {
+			return undefined;
+		}
+	};
+
 	const supertaggerSync = (
 		status: boolean,
 		users: User[],
@@ -53,10 +62,13 @@
 							? elementMatch['osm_json'].tags.name
 							: undefined;
 
+					let tagger = findUser(event);
+
 					supertaggers.push({
 						...event,
 						location: location || 'Unnamed element',
-						merchantId: elementMatch.id
+						merchantId: elementMatch.id,
+						tagger
 					});
 				}
 			});
@@ -69,15 +81,6 @@
 	$: supertaggerSync($syncStatus, $users, $events, $elements);
 
 	$: latestTaggers = supertaggers && supertaggers.length && !elementsLoading ? true : false;
-
-	const findUser = (tagger: ActivityEvent) => {
-		let foundUser = $users.find((user) => user.id == tagger['user_id']);
-		if (foundUser) {
-			return foundUser;
-		} else {
-			return '';
-		}
-	};
 </script>
 
 <svelte:head>
@@ -131,7 +134,7 @@
 								<LatestTagger
 									location={tagger.location}
 									action={tagger.type}
-									user={findUser(tagger)}
+									user={tagger.tagger}
 									time={tagger['created_at']}
 									latest={tagger === supertaggers[0] ? true : false}
 									merchantId={tagger.merchantId}