feat(name field): edit components to debounce input events and improve logging

src/components/editable_cell.rs

@@ -5,7 +5,7 @@ use leptos::logging::log;
 #[component]
 pub fn EditableCell(
     value: String,
-    on_input: impl Fn(String) + 'static,
+    on_input: impl Fn(String) + 'static + Clone,
     key: Arc<String>,
     focused_cell: ReadSignal<Option<String>>,
     set_focused_cell: WriteSignal<Option<String>>,
@@ -16,7 +16,10 @@ pub fn EditableCell(
     let input_ref = create_node_ref::<html::Input>();
     let textarea_ref = create_node_ref::<html::Textarea>();
     let (local_value, set_local_value) = create_signal(value.clone());
+    let (delayed_value, set_delayed_value) = create_signal(value.clone());
     let input_type_clone = input_type.clone();
+    let on_input_ref = on_input;
+
     // Handle input event
     let handle_input = move |e: web_sys::Event| {
         let new_value = match input_type_clone {
@@ -24,14 +27,9 @@ pub fn EditableCell(
             InputType::TextArea => event_target_value(&e),
         };
         log!("Input event: {}", new_value);
-        set_local_value.set(new_value);
+        let new_value_clone = new_value.clone();
-    };
+        set_local_value.set(new_value_clone);
-
+        set_delayed_value.set(new_value);
-    // Commit the input value on blur or enter
-    let commit_input = move || {
-        let value = local_value.get();
-        log!("Committing input: {}", value);
-        on_input(value);
     };
 
     // Focus handling
@@ -49,7 +47,6 @@ pub fn EditableCell(
     let handle_blur = move |_| {
         log!("Focus lost");
         set_focused_cell.set(None);
-        commit_input();
         if let Some(on_blur) = &on_blur {
             on_blur.call(());
         }
@@ -65,6 +62,15 @@ pub fn EditableCell(
         }
     });
 
+    create_effect(move |_| {
+        let delayed_value = delayed_value.get();
+        let on_input_ref_clone = on_input_ref.clone();
+        spawn_local(async move {
+            gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
+            on_input_ref_clone(delayed_value);
+        });
+    });
+
     view! {
         <div class="editable-cell">
             {match input_type {

src/components/items_list.rs

@@ -599,23 +599,46 @@ pub fn ItemsList(
                                                         <EditableCell
                                                             value=item.name.clone()
                                                             on_input=move |value| {
+                                                                // Update the item's name field
                                                                 update_item(index, "name", value.clone());
-                                                                fetch_wikidata_suggestions(format!("name-{}", index), value);
+                                                                log!("Input value changed: {}", value);
+
+                                                                // Log the current suggestions
+                                                                log!("Current suggestions: {:?}", wikidata_suggestions.get().get(&format!("name-{}", index)));
+                                                                
+                                                                // Debounce the API request by 500ms
+                                                                spawn_local(async move {
+                                                                    log!("Starting debounce timer for 500ms");
+                                                                    gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
+                                                                    log!("Debounce timer completed, fetching suggestions");
+
+                                                                    spawn_local(async move {
+                                                                        log!("Calling fetch_wikidata_suggestions for cell {} with value: {}", index, value);
+                                                                        fetch_wikidata_suggestions(format!("name-{}", index), value.clone());
+                                                                        log!("Updating show_suggestions to true for cell {}", index);
+                                                                        set_show_suggestions.update(|suggestions| {
+                                                                            suggestions.insert(format!("name-{}", index), true);
+                                                                        });
+                                                                    });
+                                                                });
+
+                                                                // Log the current suggestions again after the API request
+                                                                log!("Current suggestions after API request: {:?}", wikidata_suggestions.get().get(&format!("name-{}", index)));
                                                             }
                                                             key=Arc::new(format!("name-{}", index))
                                                             focused_cell=focused_cell
                                                             set_focused_cell=set_focused_cell.clone()
                                                             on_focus=Some(Callback::new(move |_| {
-                                                                log!("Input focused, showing suggestions");
+                                                                log!("Input focused, showing suggestions for cell {}", index);
                                                                 set_show_suggestions.update(|suggestions| {
                                                                     suggestions.insert(format!("name-{}", index), true);
                                                                 });
                                                             }))
                                                             on_blur=Some(Callback::new(move |_| {
-                                                                log!("Input blurred, delaying hiding suggestions");
+                                                                log!("Input blurred, delaying hiding suggestions for cell {}", index);
                                                                 spawn_local(async move {
                                                                     gloo_timers::future::sleep(std::time::Duration::from_millis(500)).await;
-                                                                    log!("Hiding suggestions after delay");
+                                                                    log!("Hiding suggestions after delay for cell {}", index);
                                                                     set_show_suggestions.update(|suggestions| {
                                                                         suggestions.insert(format!("name-{}", index), false);
                                                                     });
@@ -632,8 +655,9 @@ pub fn ItemsList(
                                                             <i class="fas fa-search"></i> Search Wiki
                                                         </button>
                                                         {move || {
+                                                            log!("Rendering suggestions list for cell {}", index);
                                                             if *show_suggestions.get().get(&format!("name-{}", index)).unwrap_or(&false) {
-                                                                log!("Rendering suggestions list");
+                                                                log!("Suggestions list is visible for cell {}", index);
                                                                 view! {
                                                                         <ul class="editable-cell-suggestions">
                                                                                 {move || {
@@ -691,7 +715,7 @@ pub fn ItemsList(
                                                                         </ul>
                                                                 }
                                                             } else {
-                                                                log!("Suggestions list hidden");
+                                                                log!("Suggestions list is hidden for cell {}", index);
                                                                 view! {
                                                                     <ul></ul>
                                                                 }