From 8a5875a001facafa10d3fa1bf968a94218067049 Mon Sep 17 00:00:00 2001
From: Alex Domingo <alex.domingo.toro@vub.be>
Date: Wed, 22 May 2024 00:39:37 +0200
Subject: [PATCH 1/2] improve feedback on hover of Load/Unload module button

---
 style/index.css | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/style/index.css b/style/index.css
index 8b2db9c..4ff0745 100644
--- a/style/index.css
+++ b/style/index.css
@@ -115,12 +115,12 @@
 }
 
 .jp-Module-item .jp-Module-itemButton {
+    visibility: hidden;
     border-radius: 0px;
 }
 
-.jp-Module-item:not(:hover) .jp-Module-itemButton {
-    visibility: hidden;
-    /* display: none; */
+.jp-Module-item:hover .jp-Module-itemButton {
+    visibility: visible;
 }
 
 .jp-Module-itemLabel {
@@ -174,6 +174,11 @@
     line-height: inherit;
     background-color: lightgrey;
     border-radius: 5px 5px 5px 5px;
+    cursor: pointer;
+}
+
+.jp-Module-itemButton.jp-mod-styled:hover {
+    background-color: rgb(230, 209, 102);
 }
 
 div.iframe-widget {
@@ -199,4 +204,4 @@ body.p-mod-override-cursor div.iframe-widget:before {
     right: 0;
     bottom: 0;
     background: transparent;
-}
\ No newline at end of file
+}

From d2c1e2b5a913770fb3982f7badcb1d7c2b798122 Mon Sep 17 00:00:00 2001
From: Alex Domingo <alex.domingo.toro@vub.be>
Date: Wed, 22 May 2024 00:41:26 +0200
Subject: [PATCH 2/2] show UI feedback while loading/unloading module

---
 src/index.ts | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 2b8292a..80678de 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -214,12 +214,21 @@ class ModuleWidget extends Widget {
     if (target.tagName == 'SPAN') {
       show_module(target.innerText);
     } else if(target.tagName == 'BUTTON') {
-      const span = event.target.closest('li').querySelector('span');
-      const item = span.innerText;
+      const parent_li = event.target.closest('li');
+      const mod_label = parent_li.querySelector('span');
+      const mod_name = mod_label.innerText;
       if(target.innerText == 'Load') {
-        await load_module(item);
+        target.innerText = 'Loading...';
+        target.style.visibility = 'visible';
+        target.style.backgroundColor = "#99b644";
+        parent_li.style.backgroundColor = "#dde6c0";
+        await load_module(mod_name);
       } else if(target.innerText == 'Unload') {
-        await moduleAPI.unload([item]);
+        target.innerText = 'Unloading...';
+        target.style.visibility = 'visible';
+        target.style.backgroundColor = "#ee8b44";
+        parent_li.style.backgroundColor = "#fad7c0";
+        await moduleAPI.unload([mod_name]);
       }
       this.update();
     }