Added a spinner and checkmark to notes.

src/staff/tables.py

@@ -340,7 +340,13 @@ class SampleStatusTable(tables.Table):
     )
 
     internal_note = tables.TemplateColumn(
-        template_name="staff/note_input_column.html", orderable=False
+        template_name="staff/note_input_column.html",
+        orderable=False,
+        attrs={
+            "td": {
+                "class": "relative",
+            },
+        },
     )
 
     marked = tables.BooleanColumn(

src/staff/templates/staff/note_input_column.html

@@ -1,7 +1,19 @@
 <textarea
     id="internal_note-input-{{ record.pk }}"
-    class="internal_note-input w-52 px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg resize-none placeholder:text-gray-400 placeholder:italic"
+    class="internal_note-input w-52 pr-8 px-2.5 py-1.5 text-sm border border-gray-300 rounded-lg resize-none placeholder:text-gray-400 placeholder:italic"
     data-sample-id="{{ record.pk }}"
     placeholder="Write a note..."
->{{ record.internal_note|default:'' }}
+  >{{ record.internal_note|default:'' }}
 </textarea>
+
+<i
+    class="fa-solid fa-spinner absolute left-60 top-10 transform -translate-y-1/2 text-blue-600 pointer-events-none animate-spin duration-2000"
+    style="visibility: hidden;"
+    id="internal_note-spinner-{{ record.pk }}"
+></i>
+
+<i
+    class="fa-solid fa-check absolute left-60 top-1/2 transform -translate-y-1/2 text-green-600 pointer-events-none"
+    style="visibility: hidden;"
+    id="internal_note-check-{{ record.pk }}"
+></i>

src/staff/templates/staff/sample_lab.html

@@ -83,13 +83,23 @@ <h3 class="text-4xl mb-5">{% block page-title %}{% if order %}{{ order }} - Samp
                 formData.append("field_value", value);
                 formData.append("csrfmiddlewaretoken", "{{ csrf_token }}");
 
+                const spinner = document.getElementById(`internal_note-spinner-${sampleId}`);
+                const checkIcon = document.getElementById(`internal_note-check-${sampleId}`);
+                checkIcon.style.visibility = "hidden";
+                spinner.style.visibility = "visible";
+
                 clearTimeout(debounceTimeout);
                 debounceTimeout = setTimeout(function () {
                     fetch("{% url 'staff:update-internal-note' %}", {
                         method: "POST",
                         body: formData
                     });
-                }, 500);
+                    spinner.style.visibility = "hidden";
+                    checkIcon.style.visibility = "visible";
+                    setTimeout(function () {
+                        checkIcon.style.visibility = "hidden";
+                    }, 5000);
+                }, 1500);
             });
         });
     });

src/theme/static_src/src/styles.css

@@ -40,7 +40,7 @@
   }
 
   .tailwind-table tbody tr td {
-    @apply border-b border-[#eee] px-4 py-5;
+    @apply border-b-2 border-[#eee] px-4 py-5;
   }
 
   .tailwind-table.table-sm tbody tr td {