From 0279ce70785935388effcf5a981bae25598e9726 Mon Sep 17 00:00:00 2001
From: Dilan Gilluly <gillulyd@gmail.com>
Date: Thu, 22 Jan 2026 15:50:20 -0500
Subject: [PATCH] (change): Extra shortcut keys and loading notice for sheets
 page.

---
 webapp/src/lib/components/FormHeader.svelte |  6 ++++--
 webapp/src/routes/sheets/+page.svelte       | 11 +++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/webapp/src/lib/components/FormHeader.svelte b/webapp/src/lib/components/FormHeader.svelte
index 4817e6c..6194af6 100644
--- a/webapp/src/lib/components/FormHeader.svelte
+++ b/webapp/src/lib/components/FormHeader.svelte
@@ -11,6 +11,8 @@
 
     if (browser) {
         hotkeys.filter = function(event) {return true}
+        hotkeys('alt+q', function(event) {const target = document.getElementById("range_start"); if (target) {target.focus()}})
+        hotkeys('alt+w', function(event) {const target = document.getElementById("range_end"); if (target) {target.focus()}})
         hotkeys('alt+n', function(event) {event.preventDefault(); functions.nextPage(); return false});
         hotkeys('alt+b', function(event) {event.preventDefault(); functions.prevPage(); return false});
         hotkeys('alt+j', function(event) {event.preventDefault(); functions.duplicateDown(); return false});
@@ -26,9 +28,9 @@
 <div id="formheader" class="{prefix.color}" bind:offsetHeight={headerHeight}>
     <div class="flex-row-space tb-margin">
         <div class="flex-row">
-            <input type="number" onfocus={(e) => e.target.select()} bind:value={pagerForm.id_from}>
+            <input type="number" id="range_start" onfocus={(e) => e.target.select()} bind:value={pagerForm.id_from}>
             <div style="font-size: 22pt">-</div>
-            <input type="number" onfocus={(e) => e.target.select()} bind:value={pagerForm.id_to}>
+            <input type="number" id="range_end" onfocus={(e) => e.target.select()} bind:value={pagerForm.id_to}>
             <button class="styled" onclick={() => {
                 if (Math.abs(pagerForm.id_to - pagerForm.id_from) > 800) {
                     pagerForm.id_to = pagerForm.id_from + 799;
diff --git a/webapp/src/routes/sheets/+page.svelte b/webapp/src/routes/sheets/+page.svelte
index c392436..d9ba229 100644
--- a/webapp/src/routes/sheets/+page.svelte
+++ b/webapp/src/routes/sheets/+page.svelte
@@ -7,10 +7,13 @@
     }
 
     function loadRows() {
-        currentRows = [];
-        for (let i = formData.startNumber; i <= formData.endNumber; i++) {
-            currentRows = [...currentRows, i];
-        }
+        currentRows = ["Loading"]
+        setTimeout(() => {
+          currentRows = [];
+          for (let i = formData.startNumber; i <= formData.endNumber; i++) {
+              currentRows = [...currentRows, i];
+          }
+        }, 1)
     }
 </script>