show user css editor before xhr is completed

js/Article.js

@@ -322,7 +322,7 @@ const Article = {
 	},
 	editTags: function (id) {
 		const dialog = new fox.SingleUseDialog({
-			title: __("Edit article Tags"),
+			title: __("Article tags"),
 			content: `
 				${App.FormFields.hidden_tag("id", id.toString())}
 				${App.FormFields.hidden_tag("op", "article")}
@@ -334,7 +334,7 @@ const Article = {
 
 				<section>
 					<textarea dojoType='dijit.form.SimpleTextarea' rows='4' disabled='true'
-						id='tags_str' name='tags_str'></textarea>
+						id='tags_str' name='tags_str'>${__("Loading, please wait...")}</textarea>
 					<div class='autocomplete' id='tags_choices' style='display:none'></div>
 				</section>
 

js/PrefHelpers.js

@@ -239,60 +239,70 @@ const	Helpers = {
 	},
 	Prefs: {
 		customizeCSS: function() {
-			xhr.json("backend.php", {op: "pref-prefs", method: "customizeCSS"}, (reply) => {
+			const dialog = new fox.SingleUseDialog({
-
+				title: __("Customize stylesheet"),
-				const dialog = new fox.SingleUseDialog({
+				apply: function() {
-					title: __("Customize stylesheet"),
+					xhr.post("backend.php", this.attr('value'), () => {
-					apply: function() {
+						Element.show("css_edit_apply_msg");
-						xhr.post("backend.php", this.attr('value'), () => {
+						App.byId("user_css_style").innerText = this.attr('value');
-							Element.show("css_edit_apply_msg");
+					});
-							App.byId("user_css_style").innerText = this.attr('value');
+				},
-						});
+				execute: function () {
-					},
+					Notify.progress('Saving data...', true);
-					execute: function () {
-						Notify.progress('Saving data...', true);
 
-						xhr.post("backend.php", this.attr('value'), () => {
+					xhr.post("backend.php", this.attr('value'), () => {
-							window.location.reload();
+						window.location.reload();
-						});
+					});
-					},
+				},
-					content: `
+				content: `
-						<div class='alert alert-info'>
+					<div class='alert alert-info'>
-							${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")}
+						${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")}
-						</div>
+					</div>
 
-						${App.FormFields.hidden_tag('op', 'rpc')}
+					${App.FormFields.hidden_tag('op', 'rpc')}
-						${App.FormFields.hidden_tag('method', 'setpref')}
+					${App.FormFields.hidden_tag('method', 'setpref')}
-						${App.FormFields.hidden_tag('key', 'USER_STYLESHEET')}
+					${App.FormFields.hidden_tag('key', 'USER_STYLESHEET')}
 
-						<div id='css_edit_apply_msg' style='display : none'>
+					<div id='css_edit_apply_msg' style='display : none'>
-							<div class='alert alert-warning'>
+						<div class='alert alert-warning'>
-								${__("User CSS has been applied, you might need to reload the page to see all changes.")}
+							${__("User CSS has been applied, you might need to reload the page to see all changes.")}
-							</div>
 						</div>
+					</div>
 
-						<textarea class='panel user-css-editor' dojoType='dijit.form.SimpleTextarea'
+					<textarea class='panel user-css-editor' disabled='true' dojoType='dijit.form.SimpleTextarea'
-							style='font-size : 12px;' name='value'>${reply.value}</textarea>
+						style='font-size : 12px;' name='value'>${__("Loading, please wait...")}</textarea>
-
-						<footer>
-							<button dojoType='dijit.form.Button' class='alt-success' onclick="App.dialogOf(this).apply()">
-								${App.FormFields.icon("check")}
-								${__('Apply')}
-							</button>
-							<button dojoType='dijit.form.Button' class='alt-primary' type='submit'>
-								${App.FormFields.icon("refresh")}
-								${__('Save and reload')}
-							</button>
-							<button dojoType='dijit.form.Button' onclick="App.dialogOf(this).hide()">
-								${__('Cancel')}
-							</button>
-						</footer>
-					`
-				});
 
-				dialog.show();
+					<footer>
+						<button dojoType='dijit.form.Button' class='alt-success' onclick="App.dialogOf(this).apply()">
+							${App.FormFields.icon("check")}
+							${__('Apply')}
+						</button>
+						<button dojoType='dijit.form.Button' class='alt-primary' type='submit'>
+							${App.FormFields.icon("refresh")}
+							${__('Save and reload')}
+						</button>
+						<button dojoType='dijit.form.Button' onclick="App.dialogOf(this).hide()">
+							${__('Cancel')}
+						</button>
+					</footer>
+				`
+			});
+
+			const tmph = dojo.connect(dialog, 'onShow', function () {
+				dojo.disconnect(tmph);
+
+				xhr.json("backend.php", {op: "pref-prefs", method: "customizeCSS"}, (reply) => {
+
+					const editor = dijit.getEnclosingWidget(dialog.domNode.querySelector(".user-css-editor"));
+
+					editor.attr('value', reply.value);
+					editor.attr('disabled', false);
+				});
 
 			});
+
+			dialog.show();
+
 		},
 		confirmReset: function() {
 			if (confirm(__("Reset to defaults?"))) {