From 29aa6610b6dc13f042cc19bb36ac6602d64f7566 Mon Sep 17 00:00:00 2001
From: Martavis Parker <47053705+martavis@users.noreply.github.com>
Date: Tue, 28 Sep 2021 21:28:39 -0700
Subject: [PATCH] Fixed empty table showing while retrieving results (#2271)

Relates to #2269
---
 changes/issue-2269-query-results              |  1 +
 .../components/QueryResults/QueryResults.tsx  | 41 +++++++++++--------
 2 files changed, 24 insertions(+), 18 deletions(-)
 create mode 100644 changes/issue-2269-query-results

diff --git a/changes/issue-2269-query-results b/changes/issue-2269-query-results
new file mode 100644
index 0000000000..8809bcba57
--- /dev/null
+++ b/changes/issue-2269-query-results
@@ -0,0 +1 @@
+- Fixed empty table showing while retrieving results
\ No newline at end of file
diff --git a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx
index cff8912b26..8aa320457c 100644
--- a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx
+++ b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResults.tsx
@@ -186,6 +186,28 @@ const QueryResults = ({
   };
 
   const renderTable = () => {
+    const emptyResults = !queryResults || !queryResults.length;
+    const hasNoResultsYet = !isQueryFinished && emptyResults;
+    const finishedWithNoResults =
+      isQueryFinished && (!hostsCount.successful || emptyResults);
+
+    if (hasNoResultsYet) {
+      return null;
+    }
+
+    if (finishedWithNoResults) {
+      return (
+        <p className="no-results-message">
+          Your live query returned no results.
+          <span>
+            Expecting to see results? Check to see if the hosts you targeted
+            reported &ldquo;Online&rdquo; or check out the &ldquo;Errors&rdquo;
+            table.
+          </span>
+        </p>
+      );
+    }
+
     return (
       <div className={`${baseClass}__results-table-container`}>
         <Button
@@ -263,10 +285,6 @@ const QueryResults = ({
     </div>
   );
 
-  const hasNoResults =
-    isQueryFinished &&
-    (!hostsCount.successful || !queryResults || !queryResults.length);
-
   const firstTabClass = classnames("react-tabs__tab", "no-count", {
     "errors-empty": !errors || errors?.length === 0,
   });
@@ -299,20 +317,7 @@ const QueryResults = ({
               {NAV_TITLES.ERRORS}
             </Tab>
           </TabList>
-          <TabPanel>
-            {isQueryFinished && hasNoResults ? (
-              <p className="no-results-message">
-                Your live query returned no results.
-                <span>
-                  Expecting to see results? Check to see if the hosts you
-                  targeted reported &ldquo;Online&rdquo; or check out the
-                  &ldquo;Errors&rdquo; table.
-                </span>
-              </p>
-            ) : (
-              renderTable()
-            )}
-          </TabPanel>
+          <TabPanel>{renderTable()}</TabPanel>
           <TabPanel>{renderErrorsTable()}</TabPanel>
         </Tabs>
       </div>