adds loaders for trail cards and lists

web/src/routes/lists/+page.svelte

@@ -179,6 +179,7 @@
             }}
             bind:activeTrail={activeTrailIndex}
             showInfoPopup={true}
+            showTerrain={true}
         ></MapWithElevationMaplibre>
     </div>
     <div class="min-w-0" class:hidden={showMap}>

web/src/routes/map/+page.svelte

@@ -5,6 +5,7 @@
     import Search, {
         type SearchItem,
     } from "$lib/components/base/search.svelte";
+    import SkeletonCard from "$lib/components/base/skeleton_card.svelte";
     import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
     import MapWithElevationMaplibre from "$lib/components/trail/map_with_elevation_maplibre.svelte";
     import TrailCard from "$lib/components/trail/trail_card.svelte";
@@ -16,16 +17,15 @@
         TrailFilter,
     } from "$lib/models/trail";
     import { categories } from "$lib/stores/category_store";
-    import {
-        trails,
-        trails_search_bounding_box,
-    } from "$lib/stores/trail_store";
+    import { trails_search_bounding_box } from "$lib/stores/trail_store";
     import { country_codes } from "$lib/util/country_code_util";
     import * as M from "maplibre-gl";
     import { onMount } from "svelte";
     import { _ } from "svelte-i18n";
     import { slide } from "svelte/transition";
 
+    let trails: Trail[] = [];
+
     let map: M.Map;
     let mapWithElevation: MapWithElevationMaplibre;
     let searchDropdownItems: SearchItem[] = [];
@@ -39,6 +39,8 @@
 
     const MIN_ZOOM = 6;
 
+    let loading: boolean = false;
+
     onMount(async () => {});
 
     async function search(q: string) {
@@ -92,12 +94,15 @@
     }
 
     async function searchTrails(northEast: M.LngLat, southWest: M.LngLat) {
+        loading = true;
         const changes = await trails_search_bounding_box(
             northEast,
             southWest,
             filter,
             map.getZoom() > MIN_ZOOM,
         );
+        trails = changes.trails;
+        loading = false;
     }
 
     function handleTrailCardMouseEnter(trail: Trail) {
@@ -147,9 +152,10 @@
             $page.url.searchParams.has("lat") &&
             $page.url.searchParams.has("lon")
         ) {
-            console.log($page.url.searchParams.get("lon"), $page.url.searchParams.get("lat"));
-            
-            map.setCenter([parseFloat($page.url.searchParams.get("lon")!), parseFloat($page.url.searchParams.get("lat")!)]);
+            map.setCenter([
+                parseFloat($page.url.searchParams.get("lon")!),
+                parseFloat($page.url.searchParams.get("lat")!),
+            ]);
             map.setZoom(14);
         } else if (settings && settings.mapFocus == "trails") {
             const boundingBox: M.LngLatBoundsLike = [
@@ -165,8 +171,6 @@
             map.setCenter([settings.location.lon, settings.location.lat]);
             map.setZoom(12);
         } else {
-            console.log("here");
-
             navigator.geolocation.getCurrentPosition(
                 (position) => {
                     const lat = position.coords.latitude;
@@ -228,21 +232,29 @@
         </div>
 
         {#if !showFilter && (!showMap || (browser && window.innerWidth >= 768))}
-            {#if $trails.length == 0}
-                <EmptyStateSearch></EmptyStateSearch>
+            {#if loading}
+                {#each { length: 4 } as _, index}
+                    <SkeletonCard></SkeletonCard>
+                {/each}
+            {:else}
+                {#if trails.length == 0}
+                    <EmptyStateSearch></EmptyStateSearch>
+                {/if}
+                {#each trails as trail, i}
+                    <a
+                        data-sveltekit-preload-data="off"
+                        href="map/trail/{trail.id}"
+                    >
+                        <TrailCard
+                            {trail}
+                            on:mouseenter={() =>
+                                handleTrailCardMouseEnter(trail)}
+                            on:mouseleave={() =>
+                                handleTrailCardMouseLeave(trail)}
+                        ></TrailCard>
+                    </a>
+                {/each}
             {/if}
-            {#each $trails as trail, i}
-                <a
-                    data-sveltekit-preload-data="off"
-                    href="map/trail/{trail.id}"
-                >
-                    <TrailCard
-                        {trail}
-                        on:mouseenter={() => handleTrailCardMouseEnter(trail)}
-                        on:mouseleave={() => handleTrailCardMouseLeave(trail)}
-                    ></TrailCard>
-                </a>
-            {/each}
         {/if}
     </div>
     <div
@@ -252,7 +264,7 @@
         <MapWithElevationMaplibre
             on:moveend={handleMapMove}
             on:init={handleMapInit}
-            trails={$trails}
+            {trails}
             showElevation={false}
             showInfoPopup={true}
             activeTrail={-1}

web/src/routes/map/+page.ts

@@ -32,7 +32,5 @@ export const load: ServerLoad = async ({ params, locals, fetch }) => {
 
     await categories_index(fetch)
 
-    trails.set([])
-
     return { filter: filter, boundingBox: boundingBox }
 };

web/src/routes/trails/+page.svelte

@@ -3,17 +3,21 @@
     import { page } from "$app/stores";
     import TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
     import TrailList from "$lib/components/trail/trail_list.svelte";
-    import type { TrailFilter } from "$lib/models/trail";
-    import { categories } from "$lib/stores/category_store";
-    import { trails, trails_search_filter } from "$lib/stores/trail_store";
+    import type { Trail, TrailFilter } from "$lib/models/trail";
+    import { trails_search_filter } from "$lib/stores/trail_store";
     import { onMount } from "svelte";
     import { _ } from "svelte-i18n";
 
     let filterExpanded: boolean = true;
 
+    let loading: boolean = false;
+
     const filter: TrailFilter = $page.data.filter;
-    const pagination: { page: number; totalPages: number } =
-        $page.data.pagination;
+    const pagination: { page: number; totalPages: number } = {
+        page: 1,
+        totalPages: 1,
+    };
+    let trails: Trail[] = [];
 
     onMount(() => {
         if (window.innerWidth < 768) {
@@ -22,14 +26,18 @@
     });
 
     async function handleFilterUpdate() {
+        loading = true;
         const response = await trails_search_filter(filter, pagination.page);
+        trails = response.trails;        
         pagination.page = response.page;
         pagination.totalPages = response.totalPages;
+        loading = false;
     }
 
     async function paginate(page: number) {
         pagination.page = page;
         const response = await trails_search_filter(filter, page);
+        trails = response.trails;
         $page.url.searchParams.set("page", page.toString());
         goto(`?${$page.url.searchParams.toString()}`);
     }
@@ -50,7 +58,8 @@
     ></TrailFilterPanel>
     <TrailList
         {filter}
-        trails={$trails}
+        {loading}
+        {trails}
         {pagination}
         on:update={() => handleFilterUpdate()}
         on:pagination={(e) => paginate(e.detail)}

web/src/routes/trails/+page.ts

@@ -1,4 +1,4 @@
-import type { TrailFilter } from "$lib/models/trail";
+import type { Trail, TrailFilter } from "$lib/models/trail";
 import { categories_index } from "$lib/stores/category_store";
 import { trails_get_filter_values, trails_search_filter } from "$lib/stores/trail_store";
 import type { ServerLoad } from "@sveltejs/kit";
@@ -32,13 +32,10 @@ export const load: ServerLoad = async ({ params, locals, url, fetch }) => {
     if (paramCategory) {
         filter.category.push(paramCategory);
     }
-    const page = url.searchParams.get("page") ?? "1";
-
-    const response = await trails_search_filter(filter, parseInt(page), fetch);
     const categories = await categories_index(fetch)
 
     return {
         categories,
-        filter: filter, pagination: { page: response.page, totalPages: response.totalPages }
+        filter: filter
     };
 };