Make the dialog gray out while fetching the seamntic order.

Part of #688.
jkomoros · Apr 8, 2024 · f13391f · f13391f
1 parent b2089b2
commit f13391f
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/actions/bulk-import.ts b/src/actions/bulk-import.ts
@@ -1,6 +1,7 @@
 import {
 	BULK_IMPORT_DIALOG_CLOSE,
 	BULK_IMPORT_DIALOG_OPEN,
+	BULK_IMPORT_PENDING,
 	BULK_IMPORT_SET_BODIES,
 	BULK_IMPORT_SET_OVERRIDE_CARD_ORDER,
 	SomeAction
@@ -89,6 +90,9 @@ export const semanticSortExport = () : ThunkSomeAction => async (dispatch, getSt
 	if (!selectUserMayUseAI(state)) throw new Error('User may not use AI');
 	const cards = selectActiveCollectionCards(state);
 	const cardIDs = cards.map(card => card.id);
+	dispatch({
+		type: BULK_IMPORT_PENDING
+	});
 	const result = await semanticSortCallable({cards: cardIDs});
 	dispatch({
 		type: BULK_IMPORT_SET_OVERRIDE_CARD_ORDER,

diff --git a/src/components/bulk-import-dialog.ts b/src/components/bulk-import-dialog.ts
@@ -104,8 +104,7 @@ class BulkImportDialog extends connect(store)(DialogElement) {
 	];
 
 	private innerRenderImport() {
-		return html`<div class='${this._pending ? 'pending' : ''}'>
-			<div class='scrim'></div>
+		return html`
 			${this._bodies.length ?
 		html`<p>Verify these bodies are ones you want to create!</p>
 			${this._bodies.map((body) => html`<textarea disabled .value=${body}></textarea>`)}` :
@@ -124,8 +123,7 @@ class BulkImportDialog extends connect(store)(DialogElement) {
 				>
 					${CHECK_CIRCLE_OUTLINE_ICON}
 				</button>
-			</div>
-		</div>`;
+			</div>`;
 	}
 
 	private innerRenderExport() {
@@ -146,15 +144,22 @@ class BulkImportDialog extends connect(store)(DialogElement) {
 	}
 
 	override innerRender() {
+		let content = html``;
 		if (!this.open) return html``;
 		switch (this._mode) {
 		case 'import':
-			return this.innerRenderImport();
+			content = this.innerRenderImport();
+			break;
 		case 'export':
-			return this.innerRenderExport();
+			content = this.innerRenderExport();
+			break;
 		default:
 			return assertUnreachable(this._mode);
 		}
+		return html`<div class='${this._pending ? 'pending' : ''}'>
+			<div class='scrim'></div>
+			${content}
+		</div>`;
 	}
 
 	_handleRawPaste(e : ClipboardEvent) {

diff --git a/src/reducers/bulk-import.ts b/src/reducers/bulk-import.ts
@@ -61,7 +61,8 @@ const app = (state : BulkImportState = INITIAL_STATE, action : SomeAction) : Bul
 	case BULK_IMPORT_SET_OVERRIDE_CARD_ORDER:
 		return {
 			...state,
-			overrideCardOrder: action.order
+			overrideCardOrder: action.order,
+			pending: false
 		};
 	default:
 		return state;