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; }