Track loading state so that we don't show "zero results" indicator while reloading page with search query

src/SkinTable.js

@@ -16,6 +16,7 @@ const SkinTable = ({
   windowWidth,
   getSkinData,
   searchQuery,
+  loadingSearchQuery,
 }) => {
   function itemKey({ columnIndex, rowIndex }) {
     const { requestToken, data: skin } = getSkinData({
@@ -35,9 +36,10 @@ const SkinTable = ({
     }
     gridRef.current.scrollTo({ scrollLeft: 0, scrollTop: 0 });
   }, [skinCount]);
+  const showGrid = loadingSearchQuery || skinCount > 0 || searchQuery === "";
   return (
     <div id="infinite-skins" style={{ marginTop: HEADING_HEIGHT }}>
-      {skinCount > 0 || searchQuery === "" ? (
+      {showGrid ? (
         <Grid
           ref={gridRef}
           itemKey={itemKey}
@@ -74,6 +76,7 @@ const mapStateToProps = (state) => ({
   selectedSkinHash: Selectors.getSelectedSkinHash(state),
   getSkinData: Selectors.getSkinDataGetter(state),
   searchQuery: Selectors.getSearchQuery(state),
+  loadingSearchQuery: Selectors.getLoadingSearchQuery(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({

src/redux/reducer.js

@@ -2,6 +2,7 @@ import { CHUNK_SIZE, UPLOAD_PAGE } from "../constants";
 
 const defaultState = {
   searchQuery: null,
+  loadingSearchResults: false,
   selectedSkinPosition: null,
   matchingSkins: null,
   defaultSkins: [],
@@ -207,6 +208,7 @@ export default function reducer(state = defaultState, action) {
     case "SEARCH_QUERY_CHANGED":
       return {
         ...state,
+        loadingSearchResults: true,
         searchQuery: action.query,
         selectedSkinHash: null,
         selectedSkinPosition: null,
@@ -225,6 +227,7 @@ export default function reducer(state = defaultState, action) {
       }
       return {
         ...state,
+        loadingSearchResults: false,
         matchingSkins: action.skins,
         skins: newSkins,
       };

src/redux/selectors.js

@@ -25,6 +25,10 @@ export function getSearchQuery(state) {
   return state.searchQuery;
 }
 
+export function getLoadingSearchQuery(state) {
+  return state.loadingSearchResults;
+}
+
 export function getMatchingSkins(state) {
   return state.matchingSkins;
 }