add loading indicator and counter to query result

Signed-off-by: abbyhu2000 <[email protected]>

src/plugins/data/public/query/query_string/language_service/lib/query_result.tsx

@@ -8,7 +8,7 @@ import { i18n } from '@osd/i18n';
 import './_recent_query.scss';
 import { EuiButtonEmpty, EuiPopover, EuiText, EuiPopoverTitle } from '@elastic/eui';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 export enum ResultStatus {
   UNINITIALIZED = 'uninitialized',
@@ -28,21 +28,60 @@ export interface QueryStatus {
     statusCode?: number;
   };
   elapsedMs?: number;
+  startTime?: number;
 }
 
+// This is the time in milliseconds that the query will wait before showing the loading spinner
+const BUFFER_TIME = 3000;
+
 export function QueryResult(props: { queryStatus: QueryStatus }) {
   const [isPopoverOpen, setPopover] = useState(false);
+  const [elapsedTime, setElapsedTime] = useState(0);
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
   };
 
+  const getTime = () => {
+    const time = new Date().getTime() - props.queryStatus.startTime!;
+    if (time > BUFFER_TIME) {
+      setElapsedTime(time);
+    } else {
+      setElapsedTime(0);
+    }
+  };
+
+  useEffect(() => {
+    const interval = setInterval(getTime, 1000);
+
+    return () => clearInterval(interval);
+  });
+
+  if (props.queryStatus.status === ResultStatus.LOADING) {
+    if (elapsedTime < BUFFER_TIME) {
+      return null;
+    }
+    const time = Math.floor(elapsedTime / 1000);
+    return (
+      <EuiButtonEmpty color="text" size="xs" onClick={() => {}} isLoading>
+        {`Loading ${time} s`}
+      </EuiButtonEmpty>
+    );
+  }
+
   if (props.queryStatus.status === ResultStatus.READY) {
+    let message;
+    if (!props.queryStatus.elapsedMs) {
+      message = 'Completed';
+    } else if (props.queryStatus.elapsedMs < 1000) {
+      message = `Completed in ${props.queryStatus.elapsedMs} ms`;
+    } else {
+      message = `Completed in ${Math.floor(props.queryStatus.elapsedMs / 1000)} s`;
+    }
+
     return (
       <EuiButtonEmpty iconSide="left" iconType={'checkInCircleEmpty'} size="xs" onClick={() => {}}>
         <EuiText size="xs" color="subdued">
-          {props.queryStatus.elapsedMs
-            ? `Completed in ${props.queryStatus.elapsedMs} ms`
-            : 'Completed'}
+          {message}
         </EuiText>
       </EuiButtonEmpty>
     );

src/plugins/discover/public/application/view_components/utils/use_search.ts

@@ -60,6 +60,7 @@ export interface SearchData {
       statusCode?: number;
     };
     elapsedMs?: number;
+    startTime?: number;
   };
 }
 
@@ -119,12 +120,14 @@ export const useSearch = (services: DiscoverViewServices) => {
     );
   }, [savedSearch, services.uiSettings, timefilter]);
 
+  const startTime = new Date().getTime();
   const data$ = useMemo(
     () =>
       new BehaviorSubject<SearchData>({
         status: shouldSearchOnPageLoad() ? ResultStatus.LOADING : ResultStatus.UNINITIALIZED,
+        queryStatus: { startTime },
       }),
-    [shouldSearchOnPageLoad]
+    [shouldSearchOnPageLoad, startTime]
   );
   const refetch$ = useMemo(() => new Subject<SearchRefetch>(), []);
 
@@ -161,7 +164,6 @@ export const useSearch = (services: DiscoverViewServices) => {
     dataset = searchSource.getField('index');
 
     let elapsedMs;
-
     try {
       // Only show loading indicator if we are fetching when the rows are empty
       if (fetchStateRef.current.rows?.length === 0) {
@@ -267,14 +269,14 @@ export const useSearch = (services: DiscoverViewServices) => {
     }
   }, [
     indexPattern,
-    interval,
     timefilter,
     toastNotifications,
+    interval,
     data,
     services,
+    sort,
     savedSearch?.searchSource,
     data$,
-    sort,
     shouldSearchOnPageLoad,
     inspectorAdapters.requests,
   ]);