diff --git a/src/SkinTable.js b/src/SkinTable.js
index 7063ec8c..306882f1 100644
--- a/src/SkinTable.js
+++ b/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 (
- {skinCount > 0 || searchQuery === "" ? (
+ {showGrid ? (
({
selectedSkinHash: Selectors.getSelectedSkinHash(state),
getSkinData: Selectors.getSkinDataGetter(state),
searchQuery: Selectors.getSearchQuery(state),
+ loadingSearchQuery: Selectors.getLoadingSearchQuery(state),
});
const mapDispatchToProps = (dispatch) => ({
diff --git a/src/redux/reducer.js b/src/redux/reducer.js
index bde397bf..ec1ce8d1 100644
--- a/src/redux/reducer.js
+++ b/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,
};
diff --git a/src/redux/selectors.js b/src/redux/selectors.js
index 972eebc6..1cb50716 100644
--- a/src/redux/selectors.js
+++ b/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;
}