[pve-devel] [RFC PATCH widget-toolkit] utils: API2Request: defer masking after layout

[Dominik Csapak <d.csapak@proxmox.com>]

since some time (not sure when exactly), the 'load()' method of the edit
window did not correctly mask the window anymore

the reason seems to be that the API2Request tries to mask the component
before it's rendered, and that did never work correctly judging from the
existing comment.

Instead of simply calling `setLoading`, test if the component is
rendered, and if not, mask it after it has finished it's layout.

Since we cannot guarantee that the 'afterlayout' event is triggered
before the api call response handler, add a unique id marker to the
waitMsgTarget that is delted when the loading is done, and only trigger
the masking if this marker is still there. (thankfully javascript is
single threaded so this should not end up being a data race)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
sending as RFC because i'm unsure if we accidentally broke the masking
somewhere along the way. AFAICS from the current code, this never could have
worked properly? anyway, i'll be looking into that sometimes soon, and
this patch should be correct anyway...

 src/Utils.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/Utils.js b/src/Utils.js
index ff7c1a7..b5e12f3 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -458,6 +458,7 @@ utilities: {
 	    newopts.url = '/api2/extjs' + newopts.url;
 	}
 	delete newopts.callback;
+	let loadingId = `loading${++Ext.idSeed}`;
 
 	let createWrapper = function(successFn, callbackFn, failureFn) {
 	    Ext.apply(newopts, {
@@ -467,6 +468,7 @@ utilities: {
 			    options.waitMsgTarget.setMasked(false);
 			} else {
 			    options.waitMsgTarget.setLoading(false);
+			    delete options.waitMsgTarget[loadingId];
 			}
 		    }
 		    let result = Ext.decode(response.responseText);
@@ -489,6 +491,7 @@ utilities: {
 			    options.waitMsgTarget.setMasked(false);
 			} else {
 			    options.waitMsgTarget.setLoading(false);
+			    delete options.waitMsgTarget[loadingId];
 			}
 		    }
 		    response.result = {};
@@ -518,9 +521,15 @@ utilities: {
 	if (target) {
 	    if (Proxmox.Utils.toolkit === 'touch') {
 		target.setMasked({ xtype: 'loadmask', message: newopts.waitMsg });
-	    } else {
-		// Note: ExtJS bug - this does not work when component is not rendered
+	    } else if (target.rendered) {
 		target.setLoading(newopts.waitMsg);
+	    } else {
+		target[loadingId] = true;
+		target.on('afterlayout', function() {
+		    if (target[loadingId]) {
+			target.setLoading(newopts.waitMsg);
+		    }
+		}, target, { single: true });
 	    }
 	}
 	Ext.Ajax.request(newopts);
-- 
2.39.2