Prevent starting the search before the current search is finished (#1…

…8341) * Add loading state on search execute * revert changes in FetchProvider.ts
Graylog2 · Feb 22, 2024 · 1576787 · 1576787
1 parent 0242f34
commit 1576787
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/graylog2-web-interface/src/views/components/DashboardSearchBar.tsx b/graylog2-web-interface/src/views/components/DashboardSearchBar.tsx
@@ -61,6 +61,7 @@ import type { TimeRange } from 'views/logic/queries/Query';
 import QueryHistoryButton from 'views/components/searchbar/QueryHistoryButton';
 import type { Editor } from 'views/components/searchbar/queryinput/ace-types';
 import useView from 'views/hooks/useView';
+import useIsLoading from 'views/hooks/useIsLoading';
 
 import TimeRangeFilter from './searchbar/time-range-filter';
 import type { DashboardFormValues } from './DashboardSearchBarForm';
@@ -125,6 +126,7 @@ const DashboardSearchBar = () => {
 
   const { parameters } = useParameters();
   const initialValues = useInitialFormValues(timerange, queryString);
+  const isLoadingExecution = useIsLoading();
 
   if (!config) {
     return <Spinner />;
@@ -142,7 +144,7 @@ const DashboardSearchBar = () => {
                                  onSubmit={submitForm}
                                  validateQueryString={(values) => _validateQueryString(values, pluggableSearchBarControls, userTimezone, handlerContext)}>
               {({ dirty, errors, isSubmitting, isValid, isValidating, handleSubmit, values, setFieldValue, validateForm }) => {
-                const disableSearchSubmit = isSubmitting || isValidating || !isValid;
+                const disableSearchSubmit = isSubmitting || isValidating || !isValid || isLoadingExecution;
 
                 return (
                   <SearchBarContainer>
@@ -160,7 +162,7 @@ const DashboardSearchBar = () => {
                       <SearchButtonAndQuery>
                         <SearchButton disabled={disableSearchSubmit}
                                       glyph="filter"
-                                      displaySpinner={isSubmitting}
+                                      displaySpinner={isSubmitting || isLoadingExecution}
                                       dirty={dirty} />
                         <SearchInputAndValidationContainer>
                           <Field name="queryString">

diff --git a/graylog2-web-interface/src/views/components/SearchBar.tsx b/graylog2-web-interface/src/views/components/SearchBar.tsx
@@ -68,6 +68,7 @@ import { updateQuery } from 'views/logic/slices/viewSlice';
 import useHandlerContext from 'views/components/useHandlerContext';
 import QueryHistoryButton from 'views/components/searchbar/QueryHistoryButton';
 import type { Editor } from 'views/components/searchbar/queryinput/ace-types';
+import useIsLoading from 'views/hooks/useIsLoading';
 
 import SearchBarForm from './searchbar/SearchBarForm';
 
@@ -152,6 +153,7 @@ const SearchBar = ({ onSubmit = defaultProps.onSubmit }: Props) => {
   const _onSubmit = useCallback((values: SearchBarFormValues) => onSubmit(dispatch, values, pluggableSearchBarControls, currentQuery),
     [currentQuery, dispatch, onSubmit, pluggableSearchBarControls]);
   const handlerContext = useHandlerContext();
+  const isLoadingExecution = useIsLoading();
 
   if (!currentQuery || !config) {
     return <Spinner />;
@@ -180,7 +182,7 @@ const SearchBar = ({ onSubmit = defaultProps.onSubmit }: Props) => {
                 setFieldValue,
                 validateForm,
               }) => {
-                const disableSearchSubmit = isSubmitting || isValidating || !isValid;
+                const disableSearchSubmit = isSubmitting || isValidating || !isValid || isLoadingExecution;
 
                 return (
                   <>
@@ -212,7 +214,7 @@ const SearchBar = ({ onSubmit = defaultProps.onSubmit }: Props) => {
                         <SearchButtonAndQuery>
                           <SearchButton disabled={disableSearchSubmit}
                                         dirty={dirty}
-                                        displaySpinner={isSubmitting} />
+                                        displaySpinner={isSubmitting || isLoadingExecution} />
                           <SearchInputAndValidationContainer>
                             <Field name="queryString">
                               {({ field: { name, value, onChange }, meta: { error } }) => (