From 7a3486fa48e54952dfe657e60fb2f6dcb9b8ce2f Mon Sep 17 00:00:00 2001
From: Sebastian Helzle <sebastian@helzle.it>
Date: Mon, 24 Jun 2024 10:26:39 +0200
Subject: [PATCH] BUGFIX: Show loading state in results view

---
 Resources/Private/Translations/de/Main.xlf            |  4 ++++
 Resources/Private/Translations/en/Main.xlf            |  4 ++++
 .../CommandResultsView/CommandResultsView.tsx         | 11 +++++++----
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/Resources/Private/Translations/de/Main.xlf b/Resources/Private/Translations/de/Main.xlf
index 40f8b5f..02428a7 100644
--- a/Resources/Private/Translations/de/Main.xlf
+++ b/Resources/Private/Translations/de/Main.xlf
@@ -50,6 +50,10 @@
                 <source>Try a different query to find more results</source>
                 <target>Versuchen sie eine andere Eingabe, um mehr Ergebnisse zu finden.</target>
             </trans-unit>
+            <trans-unit id="CommandResultsView.waitingForResults">
+                <source>Waiting for results…</source>
+                <target>Warten auf Ergebnisse…</target>
+            </trans-unit>
             <trans-unit id="ToggleButton.label">
                 <source>Search…</source>
                 <target>Suche…</target>
diff --git a/Resources/Private/Translations/en/Main.xlf b/Resources/Private/Translations/en/Main.xlf
index a0fad2d..e204127 100644
--- a/Resources/Private/Translations/en/Main.xlf
+++ b/Resources/Private/Translations/en/Main.xlf
@@ -43,6 +43,10 @@
                 <source>Try a different query to find more results</source>
             </trans-unit>
 
+            <trans-unit id="CommandResultsView.waitingForResults">
+                <source>Waiting for results…</source>
+            </trans-unit>
+
             <trans-unit id="ToggleButton.label">
                 <source>Search…</source>
             </trans-unit>
diff --git a/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx b/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx
index 4e9c354..2d888f9 100644
--- a/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx
+++ b/packages/commandbar/src/components/CommandResultsView/CommandResultsView.tsx
@@ -1,20 +1,22 @@
 import React from 'react';
 import { useComputed, useSignalEffect } from '@preact/signals';
 
-import { useCommandBarState, useCommandExecutor } from '../../state';
+import { useCommandBarState, useCommandExecutor, useIntl } from '../../state';
 import CommandListItem from '../CommandListItem/CommandListItem';
 
 import * as styles from './CommandResultsView.module.css';
 
 const CommandResultsView: React.FC = () => {
     const {
-        state: { result, highlightedOption },
+        state: { result, highlightedOption, activeCommandId },
     } = useCommandBarState();
     const { executeCommand } = useCommandExecutor();
+    const { translate } = useIntl();
     const navRef = React.useRef<HTMLElement>(null);
     const highlightedId = useComputed<CommandId>(() =>
         result.value ? Object.values(result.value.options)[highlightedOption.value].id : null
     );
+    const isLoading = activeCommandId.value !== null;
 
     useSignalEffect(() => {
         const highlightedIndex = highlightedOption.value;
@@ -28,8 +30,9 @@ const CommandResultsView: React.FC = () => {
     return (
         <div className={styles.commandResultsView}>
             {message && <h6 className={styles.message}>{message}</h6>}
-            {view ? <div>{view}</div> : ''}
-            {options && (
+            {isLoading ? <div>{translate('CommandResultsView.waitingForResults', 'Waiting for results…')}</div> : ''}
+            {!isLoading && view ? <div>{view}</div> : ''}
+            {!isLoading && options && (
                 <nav className={styles.results} ref={navRef}>
                     <ul>
                         {Object.keys(options).map((commandId) => (