BUGFIX: Show loading state in results view

Sebobo · Jun 24, 2024 · 7a3486f · 7a3486f
1 parent 8ee005b
commit 7a3486f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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) => (