Суть проблемы в следующем. При первом открытии приложения создается компонент List, который посылает запрос к серверу на загрузку данных. В этот момент отображается прелоадер. Как только данные загрузились отрисовывается таблица. Все происходит плавно, но до тех пор пока не начинаем изменять route. Если перейти по другому маршруту, а затем вернуться на главную страницу, на которой расположен компонент List, мы заметим задержку перед изменением маршрута примерно в секунду, что не очень приятно. Получается что данные есть, прелоадер показывать незачем, но actual dom из 100 строк рендерится секунду. Меня бы это ничуть не смутило, но я делал такое же приложение на vue и там точно такой же список рендерится в разы быстрее, абсолютно незаметно для пользователя. В чем может быть проблема?
class ListOfCoins extends React.Component {
componentDidMount(){
if (this.props.isLoading){
this.props.fetchCoinData();
}
}
renderTable = () => {
const { currency, coins } = this.props;
return (
coins.map((coin) => (
<Link key={coin.id} to={'/coins/' + coin.symbol}>
<CoinItem
coin={coin}
currency={currency}
/>
</Link>
))
)
}
render(){
const { isLoading } = this.props;
if (isLoading) return <Preloader height='75vh'/>
return (
<Segment.Group stacked>
{this.renderTable()}
</Segment.Group>
)
}
}
const mapStateToProps = state => {
const firstItem = state.pagination.page * state.pagination.perPage - state.pagination.perPage;
const secondItem = state.pagination.page * state.pagination.perPage;
return {
coins: state.coins.slice(firstItem, secondItem),
isLoading: state.isLoading.coins,
pagination: state.pagination,
currency: state.currency,
}
}
const mapDispatchToProps = (dispatch) => ({
fetchCoinData: () => dispatch(fetchCoinData()),
nextPage: () => dispatch(nextPage()),
prevPage: () => dispatch(prevPage()),
viewAll: () => dispatch(viewAll()),
backTo100: () => dispatch(backTo100()),
dispatch: dispatch,
})
ListOfCoins.propTypes = {
coins: PropTypes.array.isRequired,
isLoading: PropTypes.bool.isRequired,
pagination: PropTypes.object.isRequired,
currency: PropTypes.string.isRequired,
}
export default connect(mapStateToProps, mapDispatchToProps)(ListOfCoins);
