Add a simple loading indicator to the search form

I explored alternatives with CSS animations, but there is nothing as
objectively correct as the iterated ellipsis.

.changeset/cuddly-mangos-film.md

@@ -0,0 +1,5 @@
+---
+"neogrok": patch
+---
+
+Add a simple loading indicator to the search form

src/lib/loading-ellipsis.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { navigating } from "$app/stores";
+  import { derived } from "svelte/store";
+
+  const count = derived<typeof navigating, number>(
+    navigating,
+    ($n, set, update) => {
+      if ($n !== null) {
+        const id = setInterval(() => update((c) => c + 1), 250);
+        return () => clearInterval(id);
+      } else {
+        set(0);
+      }
+    },
+    0,
+  );
+</script>
+
+{".".repeat($count % 4)}

src/routes/(search-page)/search-form.svelte

@@ -6,6 +6,7 @@
   import { computeInputColor } from "$lib/input-colors";
   import ToggleSearchType from "$lib/toggle-search-type.svelte";
   import ToggleMatchSortOrder from "$lib/toggle-match-sort-order.svelte";
+  import LoadingEllipsis from "$lib/loading-ellipsis.svelte";
   import {
     routeSearchQuery,
     updateRouteSearchQuery,
@@ -59,7 +60,6 @@
     $navigating === null && $routeSearchQuery.matches !== matches;
 </script>
 
-<!-- TODO more clearly indicate in the UI when a search query API request is in progress -->
 <!-- TODO explore JS-disabled compat.  Should actually be pretty doable with `action="/"`? -->
 <form
   on:submit|preventDefault={() => {
@@ -73,7 +73,7 @@
 
   <div class="flex flex-wrap gap-y-2 justify-center whitespace-nowrap">
     <label for="query" class="flex-auto flex flex-col space-y-0.5">
-      <span class="text-xs px-1 text-gray-500">query</span>
+      <span class="text-xs px-1 text-gray-500">query<LoadingEllipsis /></span>
       <span
         class={`flex flex-auto p-1 border shadow-sm space-x-1 ${computeInputColor(
           {

src/routes/repositories/search-form.svelte

@@ -5,6 +5,7 @@
   import { computeInputColor } from "$lib/input-colors";
   import { routeListQuery, updateRouteListQuery } from "./route-list-query";
   import ToggleSearchType from "$lib/toggle-search-type.svelte";
+  import LoadingEllipsis from "$lib/loading-ellipsis.svelte";
 
   export let queryError: string | null;
 
@@ -55,7 +56,7 @@
   <label for="query" class="flex-auto flex flex-col space-y-0.5">
     <span
       title="Same query syntax as the main search - use `r:name` to filter repositories by name, otherwise you are filtering them by their content!"
-      class="text-xs px-1 text-gray-500">query</span
+      class="text-xs px-1 text-gray-500">query<LoadingEllipsis /></span
     >
     <span
       class={`flex flex-auto p-1 border shadow-sm space-x-1 ${computeInputColor(