From 848c5cc7a2ca90709a7f5c2977b7d23d2c0799b7 Mon Sep 17 00:00:00 2001
From: Bobby Iliev <bobby@bobbyiliev.com>
Date: Tue, 31 Oct 2023 16:00:53 +0200
Subject: [PATCH] 87: Add a loading timer during query execution

---
 resources/style.css              |  2 +-
 src/providers/results.ts         |  2 +-
 src/providers/scripts/results.ts | 32 +++++++++++++++++++++++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/resources/style.css b/resources/style.css
index b819d34..a9d3d21 100644
--- a/resources/style.css
+++ b/resources/style.css
@@ -141,4 +141,4 @@ vscode-text-field {
     font-size: var(--vscode-font-size);
     line-height: normal;
     margin-bottom: 2px;
-}
\ No newline at end of file
+}
diff --git a/src/providers/results.ts b/src/providers/results.ts
index 72fa98d..52b3c6d 100644
--- a/src/providers/results.ts
+++ b/src/providers/results.ts
@@ -146,4 +146,4 @@ export default class ResultsProvider implements vscode.WebviewViewProvider {
         </body>
         </html>`;
     }
-}
\ No newline at end of file
+}
diff --git a/src/providers/scripts/results.ts b/src/providers/scripts/results.ts
index 3dad497..108ef3a 100644
--- a/src/providers/scripts/results.ts
+++ b/src/providers/scripts/results.ts
@@ -40,6 +40,10 @@
         return capitalized;
     };
 
+    let timer: any;
+    let elapsedTime: number = 0;
+    let timerElement: HTMLElement | null = null;
+
     // Handle messages sent from the extension to the webview
     window.addEventListener('message', ({ data: message }) => {
         const { type } = message;
@@ -57,6 +61,29 @@
                     const progressRing = document.createElement("vscode-progress-ring");
                     progressRing.id = "progress-ring";
                     container.appendChild(progressRing);
+
+                    elapsedTime = 0;
+                    // Dynamically create the timer div if it doesn't exist
+                    if (!timerElement) {
+                        timerElement = document.createElement('div');
+                        timerElement.id = 'timer';
+                        timerElement.style.fontWeight = "300";
+                        timerElement.style.fontSize = "12px";
+                        timerElement.style.paddingTop = "0.5rem";
+                        document.body.appendChild(timerElement);
+                    }
+                    // Reset and show the timer content
+                    timerElement.textContent = 'Time elapsed: 00:00';
+                    timerElement.style.display = 'block';
+                    clearInterval(timer);
+                    timer = setInterval(() => {
+                        elapsedTime++;
+                        const minutes = Math.floor(elapsedTime / 60);
+                        const seconds = elapsedTime % 60;
+                        if (timerElement) {
+                            timerElement.textContent = `Time elapsed: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                        }
+                    }, 1000);
                     break;
                 }
 
@@ -74,6 +101,10 @@
                     let table = document.getElementById(tableId);
 
                     // Elapsed time message
+                    clearInterval(timer);
+                    if (timerElement) {
+                        timerElement.style.display = 'none';
+                    }
                     console.log("[Results]", "Elapsed time: ", elapsedTime);
                     const elapsedTimeCommandMessageContainer = document.createElement("div");
                     const elapsedMessage = `Time elapsed: ${elapsedTime}ms`;
@@ -246,4 +277,3 @@
     // Communicate to the provider that the script is ready to render data.
     vscode.postMessage({ type: "ready" });
 }());
-