feat(UI): Add busy indicator when interact with API.

imoize · Sep 6, 2024 · 1a0698b · 1a0698b
1 parent 0783f28
commit 1a0698b
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/package/contents/ui/ListPage.qml b/package/contents/ui/ListPage.qml
@@ -56,7 +56,7 @@ ColumnLayout {
     property var header: PlasmaExtras.PlasmoidHeading {
         contentItem: RowLayout {
             spacing: 0
-            enabled: models.count > 0
+            enabled: models.count > 0 && !isLoading
 
             PlasmaExtras.SearchField {
                 id: filter
@@ -79,7 +79,7 @@ ColumnLayout {
 
     property var footer: PlasmaExtras.PlasmoidHeading {
         contentItem: RowLayout {
-            enabled: runningModels.count > 0
+            enabled: runningModels.count > 0 && !isLoading
 
             PlasmaComponents.ComboBox {
                 id: modelsCombobox
@@ -124,6 +124,7 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.fillHeight: true
         background: null
+        enabled: !isLoading
 
         contentItem: ListView {
             id: modelListView

diff --git a/package/contents/ui/ModelsDelegate.qml b/package/contents/ui/ModelsDelegate.qml
@@ -16,7 +16,7 @@ PlasmaComponents.ItemDelegate {
 
     MouseArea {
         anchors.fill: parent
-        hoverEnabled: true
+        hoverEnabled: isLoading ? false : true
         onEntered: {
             modelListView.currentIndex = index;
         }

diff --git a/package/contents/ui/Utils.js b/package/contents/ui/Utils.js
@@ -137,6 +137,8 @@ function handleModel(model, action) {
         keep_alive: action === "unload" ? 0 : undefined,
     });
 
+    isLoading = true;
+
     function sendRequest(url) {
         const xhr = new XMLHttpRequest();
         xhr.open("POST", url, true);
@@ -148,10 +150,12 @@ function handleModel(model, action) {
                     invokeDelayTimerCallback(() => {
                         getRunningModels();
                     });
+                    isLoading = false;
                 } else if (xhr.status === 400 && url === generateUrl) {
                     sendRequest(embedUrl);
                 } else {
                     console.error("Error " + action + ": " + xhr.status + " " + xhr.statusText + " " + xhr.responseText);
+                    isLoading = false;
                 }
             }
         };
@@ -167,6 +171,8 @@ function copyModel(source, destination) {
         destination: destination,
     });
 
+    isLoading = true;
+
     const xhr = new XMLHttpRequest();
     xhr.open("POST", url, true);
     xhr.setRequestHeader("Content-Type", "application/json");
@@ -175,9 +181,11 @@ function copyModel(source, destination) {
         if (xhr.readyState === XMLHttpRequest.DONE) {
             if (xhr.status === 200) {
                 getModels();
+                isLoading = false;
             } else {
                 console.error("Error copying model: " + xhr.status);
                 getModels();
+                isLoading = false;
             }
         }
     };
@@ -188,9 +196,11 @@ function deleteModelCallback(resCode, _, stdout) {
     if (resCode === "200") {
         endAll();
         getModels();
+        isLoading = false;
     } else if (resCode !== "200" || resCode === "") {
         endAll()
         getModels();
+        isLoading = false;
     }
 }
 
@@ -206,6 +216,7 @@ class Command {
 
         let newCmd;
         if (this.txt === "delete-model") {
+            isLoading = true;
             const data = JSON.stringify({
                 name: args[0],
             });

diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml
@@ -14,6 +14,7 @@ PlasmoidItem {
     id: main
 
     property bool ollamaRunning: false
+    property bool isLoading: false
     property var cfg: plasmoid.configuration
     property var delayCallback: function() {}
     signal pop()
@@ -146,6 +147,12 @@ PlasmoidItem {
         header: stack.currentItem.header
         footer: stack.currentItem.footer
 
+        PlasmaComponents.BusyIndicator {
+            id: busyIndicator
+            anchors.centerIn: parent
+            running: isLoading
+        }
+
         QQC2.StackView {
             id: stack
             anchors.fill: parent