diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
index 58e49c5da4..b368ccbdfc 100644
--- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
@@ -14,6 +14,7 @@ import paths from "router/paths";
 import permissionUtils from "utilities/permissions";
 
 import Button from "components/buttons/Button";
+import Spinner from "components/loaders/Spinner";
 import QueriesListError from "./components/QueriesListError";
 import QueriesListWrapper from "./components/QueriesListWrapper";
 import RemoveQueryModal from "./components/RemoveQueryModal";
@@ -25,7 +26,7 @@ interface IRootState {
   };
   entities: {
     queries: {
-      isLoading: boolean;
+      loading: boolean;
       data: IQuery[];
       errors: any;
     };
@@ -61,6 +62,17 @@ const ManageQueriesPage = (): JSX.Element => {
     dispatch(queryActions.loadAll());
   }, [dispatch]);
 
+  const loadingQueries = useSelector(
+    (state: IRootState) => state.entities.queries.loading
+  );
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  useEffect(() => {
+    setIsLoading(loadingQueries);
+  }, [loadingQueries]);
+  useEffect(() => {
+    setIsLoading(true);
+  }, []);
+
   const queries = useSelector((state: IRootState) => state.entities.queries);
   const queriesList = Object.values(queries.data);
   const queriesErrors = queries.errors;
@@ -134,7 +146,11 @@ const ManageQueriesPage = (): JSX.Element => {
           )}
         </div>
         <div>
-          {true && renderTable(onRemoveQueryClick, queriesList, queriesErrors)}
+          {!isLoading ? (
+            renderTable(onRemoveQueryClick, queriesList, queriesErrors)
+          ) : (
+            <Spinner />
+          )}
         </div>
         {showRemoveQueryModal && (
           <RemoveQueryModal
diff --git a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
index 7c5c6104d1..384d187fcb 100644
--- a/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/components/QueriesListWrapper/QueriesListWrapper.tsx
@@ -21,18 +21,24 @@ interface IRootState {
   };
   entities: {
     queries: {
-      isLoading: boolean;
+      loading: boolean;
       data: IQuery[];
     };
   };
 }
 
-const QueriesListWrapper = (props: IQueriesListWrapperProps): JSX.Element => {
-  const { onRemoveQueryClick, queriesList } = props;
+const QueriesListWrapper = (
+  listProps: IQueriesListWrapperProps
+): JSX.Element | null => {
+  const { onRemoveQueryClick, queriesList } = listProps;
 
-  const loadingTableData = useSelector(
-    (state: IRootState) => state.entities.queries.isLoading
+  const loadingQueries = useSelector(
+    (state: IRootState) => state.entities.queries.loading
   );
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  useEffect(() => {
+    setIsLoading(loadingQueries);
+  }, [loadingQueries]);
 
   const currentUser = useSelector((state: IRootState) => state.auth.user);
   const isOnlyObserver = permissionUtils.isOnlyObserver(currentUser);
@@ -41,15 +47,15 @@ const QueriesListWrapper = (props: IQueriesListWrapperProps): JSX.Element => {
   const [searchString, setSearchString] = useState<string>("");
 
   useEffect(() => {
-    setFilteredQueries(queriesList);
-  }, [queriesList]);
-
-  useEffect(() => {
-    setFilteredQueries(() => {
-      return queriesList.filter((query) => {
-        return query.name.toLowerCase().includes(searchString.toLowerCase());
-      });
-    });
+    setFilteredQueries(
+      !searchString
+        ? queriesList
+        : queriesList.filter((query) => {
+            return query.name
+              .toLowerCase()
+              .includes(searchString.toLowerCase());
+          })
+    );
   }, [queriesList, searchString, setFilteredQueries]);
 
   const onQueryChange = useCallback(
@@ -85,13 +91,13 @@ const QueriesListWrapper = (props: IQueriesListWrapperProps): JSX.Element => {
 
   const tableHeaders = generateTableHeaders(isOnlyObserver);
 
-  return (
+  return !isLoading ? (
     <div className={`${baseClass}`}>
       <TableContainer
         resultsTitle={"queries"}
         columns={tableHeaders}
         data={filteredQueries}
-        isLoading={loadingTableData}
+        isLoading={isLoading}
         defaultSortHeader={"query"}
         defaultSortDirection={"desc"}
         showMarkAllPages={false}
@@ -107,7 +113,7 @@ const QueriesListWrapper = (props: IQueriesListWrapperProps): JSX.Element => {
         emptyComponent={NoQueriesComponent}
       />
     </div>
-  );
+  ) : null;
 };
 
 export default QueriesListWrapper;