From ca467005a7d040480adce8e8dddb099522ac7a64 Mon Sep 17 00:00:00 2001
From: Erki Aas <eaas@k-space.ee>
Date: Tue, 15 Nov 2022 20:12:01 +0200
Subject: [PATCH] Add overlay which indicates that rows are being loaded

---
 src/assets/main.css                        |  7 +++++++
 src/components/Grid/Main/loadingOverlay.js |  7 +++++++
 src/components/LogViewer.vue               | 13 ++++++++++++-
 3 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Grid/Main/loadingOverlay.js

diff --git a/src/assets/main.css b/src/assets/main.css
index 2cb5516..be29517 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -28,4 +28,11 @@ div#app {
 
 :root {
   --vs-font-size: 1em!important;
+}
+
+.ag-overlay-panel {
+  display: flex;
+  width: 100%;
+  height: calc(100% - 56px);
+  margin-top: 56px;
 }
\ No newline at end of file
diff --git a/src/components/Grid/Main/loadingOverlay.js b/src/components/Grid/Main/loadingOverlay.js
new file mode 100644
index 0000000..4db199c
--- /dev/null
+++ b/src/components/Grid/Main/loadingOverlay.js
@@ -0,0 +1,7 @@
+export default {
+    template: `
+      <div class="ag-overlay-loading-center">
+        Loading
+      </div>
+    `,
+};
\ No newline at end of file
diff --git a/src/components/LogViewer.vue b/src/components/LogViewer.vue
index fe9e44f..0057000 100644
--- a/src/components/LogViewer.vue
+++ b/src/components/LogViewer.vue
@@ -34,6 +34,7 @@
       :enable-scrolling="true"
       :isExternalFilterPresent="() => {return true}"
       :doesExternalFilterPass="doesExternalFilterPass"
+      :loadingOverlayComponent="'loadingOverlay'"
     ></ag-grid-vue>
     <ExamineLogModal :examine-log-content="examineLogContent" :close-modal="closeExamineLog" />
   </div>
@@ -54,6 +55,7 @@ import parseEventData from "../helpers/parseEventData";
 import {mapActions, mapGetters} from 'vuex';
 import config from "./Grid/Main/config";
 import Datepicker from "./Grid/Main/Filter/Datepicker.vue";
+import loadingOverlay from "./Grid/Main/loadingOverlay";
 
 export default {
   components: {
@@ -64,7 +66,8 @@ export default {
     ErrLevelRenderer,
     VBtn,
     VRow,
-    VCol
+    VCol,
+    loadingOverlay
   },
   directives: {
     Resize
@@ -128,7 +131,11 @@ export default {
         es.onmessage = (e) => this.handleReceiveMessage(e)
         es.addEventListener("filters", (e) => this.handleReceiveFilters(e))
         es.addEventListener("timeout", (e) => this.handleReceiveTimeout(e))
+        es.addEventListener("completed", (e) => this.handleAllReceived(e))
         this.es = es
+        if (this.gridApi) {
+          this.gridApi.showLoadingOverlay();
+        }
       }
       url.searchParams.delete('initial')
       if (url.searchParams.get('streaming') === 'false') {
@@ -235,6 +242,10 @@ export default {
         position: "top-right",
       });
       setTimeout(this.$toast.clear, 3000);
+      this.gridApi.hideOverlay();
+    },
+    handleAllReceived () {
+      this.gridApi.hideOverlay();
     },
     doesExternalFilterPass(node) {
       if (node.data && this.filterQuery.from && this.filterQuery.to) {