From bfedee13486da7dd4f0668c60f9f8456930642ec Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 10 Jul 2022 00:38:45 +1000
Subject: Add processing indicator

---
 src/App.vue   | 38 ++++++++++++++++++++++++++++----------
 src/README.md |  1 +
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6de2117..f7b87df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,7 +52,7 @@
 		<search-modal v-if="searchOpen"
 			:tolMap="tolMap" :lytMap="layoutMap" :activeRoot="activeRoot" :lytOpts="lytOpts" :uiOpts="uiOpts"
 			@close="onSearchClose" @search="onSearch" @info-click="onInfoClick" @setting-chg="onSettingChg"
-			@net-wait="primeLoadInd('Loading data')" @net-get="endLoadInd" class="z-10" ref="searchModal"/>
+			@net-wait="onSearchNetWait" @net-get="endLoadInd" class="z-10" ref="searchModal"/>
 	</transition>
 	<transition name="fade">
 		<tile-info-modal v-if="infoModalNodeName != null && infoModalData != null"
@@ -117,6 +117,9 @@ function getReverseAction(action: AutoAction): AutoAction | null {
 		return null;
 	}
 }
+// Constants
+const SERVER_WAIT_MSG = 'Loading data';
+const PROCESSING_WAIT_MSG = 'Processing';
 
 export default defineComponent({
 	data(){
@@ -165,7 +168,7 @@ export default defineComponent({
 			afterResizeHdlr: 0, // Set via setTimeout() to execute after a run of resize events
 			// Other
 			justInitialised: false, // Used to skip transition for the tile initially loaded from server
-			pendingLoadingRevealHdlr: 0, // Used to delay showing the loading-indicator modal
+			pendingLoadingRevealHdlr: 0, // Used to delay showing the loading-indicator
 			changedSweepToParent: false, // Set during search animation for efficiency
 			excessTolNodeThreshold: 1000, // Threshold where excess tolMap entries get removed
 		};
@@ -260,6 +263,7 @@ export default defineComponent({
 			}
 			// Function for expanding tile
 			let doExpansion = async () => {
+				this.primeLoadInd(PROCESSING_WAIT_MSG);
 				let lytFnOpts = {
 					allowCollapse: false,
 					chg: {type: 'expand', node: layoutNode, tolMap: this.tolMap} as LayoutTreeChg,
@@ -290,6 +294,7 @@ export default defineComponent({
 				if (!subAction && !success){
 					layoutNode.failFlag = !layoutNode.failFlag; // Triggers failure animation
 				}
+				this.$nextTick(this.endLoadInd);
 				return success;
 			};
 			//
@@ -329,6 +334,7 @@ export default defineComponent({
 				return false;
 			}
 			// Relayout
+			this.primeLoadInd(PROCESSING_WAIT_MSG);
 			let success = tryLayout(this.activeRoot, this.tileAreaDims, this.lytOpts, {
 				allowCollapse: false,
 				chg: {type: 'collapse', node: layoutNode, tolMap: this.tolMap},
@@ -358,6 +364,7 @@ export default defineComponent({
 			if (!subAction){
 				this.onActionEnd('collapse');
 			}
+			this.$nextTick(this.endLoadInd);
 			return success;
 		},
 		// For expand-to-view and ancestry-bar events
@@ -373,6 +380,7 @@ export default defineComponent({
 			}
 			// Function for expanding tile
 			let doExpansion = async () => {
+				this.primeLoadInd(PROCESSING_WAIT_MSG);
 				// Hide ancestors
 				LayoutNode.hideUpward(layoutNode, this.layoutMap);
 				this.activeRoot = layoutNode;
@@ -397,6 +405,7 @@ export default defineComponent({
 				if (!success && !subAction){
 					layoutNode.failFlag = !layoutNode.failFlag; // Triggers failure animation
 				}
+				this.$nextTick(this.endLoadInd);
 				return success;
 			};
 			// Check if data for node-to-expand exists, getting from server if needed
@@ -429,21 +438,25 @@ export default defineComponent({
 			if (!subAction && !this.onActionStart('expandToView')){
 				return false;
 			}
+			this.primeLoadInd(PROCESSING_WAIT_MSG);
 			// Hide ancestors
 			LayoutNode.hideUpward(layoutNode, this.layoutMap);
 			this.activeRoot = layoutNode;
 			// Relayout
 			this.updateAreaDims();
 			let success = this.relayoutWithCollapse();
+			//
 			if (!subAction){
 				this.onActionEnd('expandToView');
 			}
+			this.$nextTick(this.endLoadInd);
 			return success;
 		},
 		async onDetachedAncestorClick(layoutNode: LayoutNode, subAction = false, collapse = false): Promise<boolean> {
 			if (!subAction && !this.onActionStart('unhideAncestor')){
 				return false;
 			}
+			this.primeLoadInd(PROCESSING_WAIT_MSG);
 			// Unhide ancestors
 			this.activeRoot = layoutNode;
 			this.overflownRoot = false;
@@ -462,9 +475,11 @@ export default defineComponent({
 				success = await this.onNonleafClick(layoutNode, true); // For reducing tile-flashing on-screen
 			}
 			LayoutNode.showDownward(layoutNode);
+			//
 			if (!subAction){
 				this.onActionEnd('unhideAncestor');
 			}
+			this.$nextTick(this.endLoadInd);
 			return success;
 		},
 		// For tile-info events
@@ -594,6 +609,9 @@ export default defineComponent({
 			this.searchOpen = false;
 			this.onActionEnd('search');
 		},
+		onSearchNetWait(){
+			this.primeLoadInd(SERVER_WAIT_MSG);
+		},
 		// For auto-mode events
 		onAutoIconClick(){
 			if (!this.onActionStart('autoMode')){
@@ -893,24 +911,24 @@ export default defineComponent({
 			}
 		},
 		// For the loading-indicator
-		async loadFromServer(urlParams: URLSearchParams){ // Like queryServer(), but enables the loading indicator
-			this.primeLoadInd('Loading data');
-			let responseObj = await queryServer(urlParams);
-			this.endLoadInd();
-			return responseObj;
-		},
-		primeLoadInd(msg: string){
+		primeLoadInd(msg: string){ // Sets up a loading message to display after a timeout
 			this.pendingLoadingRevealHdlr = setTimeout(() => {
 				this.loadingMsg = msg;
 			}, 500);
 		},
-		endLoadInd(){
+		endLoadInd(){ // Cancels or closes a loading message
 			clearTimeout(this.pendingLoadingRevealHdlr);
 			this.pendingLoadingRevealHdlr = 0;
 			if (this.loadingMsg != null){
 				this.loadingMsg = null;
 			}
 		},
+		async loadFromServer(urlParams: URLSearchParams){ // Like queryServer(), but enables the loading indicator
+			this.primeLoadInd(SERVER_WAIT_MSG);
+			let responseObj = await queryServer(urlParams);
+			this.endLoadInd();
+			return responseObj;
+		},
 		// For initialisation
 		async initTreeFromServer(firstInit = true){
 			// Get possible target node from URL
diff --git a/src/README.md b/src/README.md
index 3171046..23f05ee 100644
--- a/src/README.md
+++ b/src/README.md
@@ -9,6 +9,7 @@
     -   HelpModal.vue:     Modal displaying help info.
     -   AncestryBar.vue:   Displays ancestors of the outermost Tile.
     -   TutorialPane.vue:  Displays tutorial content.
+    -   LoadingModal.vue:  Displays a loading indicator.
     -   SButton.vue:       Simple button component.
     -   IconButton.vue:    Simple button component containing an SVG icon.
     -   SCollapsible.vue:  Simple collapsible-content component.
-- 
cgit v1.2.3