Как убрать пагинацию при загрузке страницы?

Question

[Bart Simpson]

Делаю приложение на реакте и у меня страничка, данные которой приходят с сервера и снизу пагинация и проблема в том что при загрузке страницы мелькает пагинация и только потом подгружаются данные. Мне нужно, чтоб эта пагинация при загрузке вообще не была видна. Проект состоит из нескольких компонентов и сама пагинация реализована после того как я пробегаюсь по данным с сервера и передаю в другой компонент.
Пример:

<div className={'movies'}>
      {currentMovie.map((item) => (
        <MoviesList item={item} key={item.id} />
      ))}
      <Pagination
        totaMoviess={totalMovies}
        MoviesPerPage={MoviesPerPage}
        currentPage={currentPage}
        paginate={paginate}
      />

Я пробовал несколько вариантов, например создать [loading, setLoading] и когда данные загружаются добавить пагинации display:none, но ничего из этого не вышло, она все также мелькает при загрузке.

Answer 1

[Артем]

Есть такая штука как условный рендеринг.
Например:

{currentMovie.length &&
 <Pagination
        totaMoviess={totalMovies}
        MoviesPerPage={MoviesPerPage}
        currentPage={currentPage}
        paginate={paginate}
      />
}

Или другое условие для показа компонента.
display:none здесь вообще забудь.

Comments

[Bart Simpson]

Да, я делал условным вот так:

{currentMovie &&
 <Pagination
        totaMoviess={totalMovies}
        MoviesPerPage={MoviesPerPage}
        currentPage={currentPage}
        paginate={paginate}
      />
}

Про length не додумался, спасибо

[Артем]

Bart Simpson, не за что.

Answer 2

[Алексей Ярков]

Мне нужно чтоб эта пагинация при загрузке вообще не была видна

Ну так и скройте её изначально, например через display: none, и мелькать не будет ничего.