adds loaders for trail cards and lists

web/src/lib/components/trail/map_with_elevation_maplibre.svelte

@@ -355,6 +355,7 @@
             );
             epc?.showProfile();
         }
+        showWaypoints();
         flyToBounds();
     }
 
@@ -367,6 +368,7 @@
         if (showElevation) {
             epc?.hideProfile();
         }
+        hideWaypoints();
     }
 
     function addStartEndMarkers(
@@ -418,6 +420,26 @@
         layers[id]?.startMarker?.togglePopup();
     }
 
+    function showWaypoints() {
+        if (!map) {
+            return;
+        }
+        for (const waypoint of trails[activeTrail]?.expand.waypoints ?? []) {
+            const marker = createMarkerFromWaypoint(waypoint);
+            marker.addTo(map);
+            markers.push(marker);
+        }
+    }
+
+    function hideWaypoints() {
+        if (!map) {
+            return;
+        }
+        for (const m of markers) {
+            m.remove()
+        }
+    }
+
     onMount(async () => {
         const initialState = {
             lng: 0,
@@ -465,7 +487,7 @@
             (s) => s.text === localStorage.getItem("layer"),
         );
 
-        if(preferredMapStyleIndex == -1) {
+        if (preferredMapStyleIndex == -1) {
             preferredMapStyleIndex = 0;
         }
 
@@ -567,7 +589,7 @@
                 addTrailLayer(t, t.id ?? i.toString(), data?.at(i));
             });
 
-            if (showTerrain && $page.data.settings?.terrain) {
+            if (showTerrain && $page.data.settings?.terrain && !map?.getSource("terrain")) {
                 map!.addSource("terrain", {
                     type: "raster-dem",
                     url: $page.data.settings.terrain,
@@ -600,11 +622,7 @@
             dispatch("init", map);
         });
 
-        for (const waypoint of trails[activeTrail]?.expand.waypoints ?? []) {
-            const marker = createMarkerFromWaypoint(waypoint);
-            marker.addTo(map);
-            markers.push(marker);
-        }
+        showWaypoints();
     });
 
     onDestroy(() => {

web/src/lib/components/trail/trail_list.svelte

@@ -7,6 +7,8 @@
     import EmptyStateSearch from "../empty_states/empty_state_search.svelte";
     import TrailCard from "./trail_card.svelte";
     import TrailListItem from "./trail_list_item.svelte";
+    import SkeletonCard from "../base/skeleton_card.svelte";
+    import SkeletonListItem from "../base/skeleton_list_item.svelte";
 
     export let filter: TrailFilter | null = null;
     export let trails: Trail[];
@@ -15,6 +17,8 @@
         totalPages: 1,
     };
 
+    export let loading: boolean = false;
+
     const displayOptions: SelectItem[] = [
         { text: $_("card", { values: { n: 2 } }), value: "cards" },
         { text: $_("list", { values: { n: 1 } }), value: "list" },
@@ -58,7 +62,7 @@
     }
 
     function setSort() {
-        if(!filter) {
+        if (!filter) {
             return;
         }
         localStorage.setItem("sort", filter.sort);
@@ -66,7 +70,7 @@
     }
 
     function setSortOrder() {
-        if(!filter) {
+        if (!filter) {
             return;
         }
         if (filter.sortOrder === "+") {
@@ -119,25 +123,35 @@
     </div>
 
     <div id="trails" class="flex items-start flex-wrap gap-8 py-8 max-w-full">
-        {#if trails.length == 0}
-            <div class="flex flex-col basis-full items-center">
-                <EmptyStateSearch width={356}></EmptyStateSearch>
-            </div>
-        {/if}
-        {#each trails as trail}
-            <a
-                class="max-w-full"
-                class:basis-full={selectedDisplayOption === "list"}
-                href="/trail/view/{trail.id}"
-                data-sveltekit-preload-data="off"
-            >
+        {#if loading}
+            {#each { length: 12 } as _, index}
                 {#if selectedDisplayOption === "cards"}
-                    <TrailCard {trail}></TrailCard>
+                    <SkeletonCard></SkeletonCard>
                 {:else}
-                    <TrailListItem {trail}></TrailListItem>
+                    <SkeletonListItem></SkeletonListItem>
                 {/if}
-            </a>
-        {/each}
+            {/each}
+        {:else}
+            {#if trails.length == 0}
+                <div class="flex flex-col basis-full items-center">
+                    <EmptyStateSearch width={356}></EmptyStateSearch>
+                </div>
+            {/if}
+            {#each trails as trail}
+                <a
+                    class="max-w-full"
+                    class:basis-full={selectedDisplayOption === "list"}
+                    href="/trail/view/{trail.id}"
+                    data-sveltekit-preload-data="off"
+                >
+                    {#if selectedDisplayOption === "cards"}
+                        <TrailCard {trail}></TrailCard>
+                    {:else}
+                        <TrailListItem {trail}></TrailListItem>
+                    {/if}
+                </a>
+            {/each}
+        {/if}
     </div>
     <Pagination
         page={pagination.page}