title: Proper way to render content without flickering ? React + Redux + TS
body: <p>Could you help me with the logic for rendering content?
  I'm doing pet-project with React, Redux, TS and have troubles with content rendering on page load.</p>
  <p>Actually there are two problems.</p>
  <p><strong>The first problem:</strong></p>
  <ol>
  <li>When I click on a card the GET request is sent for the card data.</li>
  <li>Card's page is opens (dynamic routing with useParams)</li>
  <li>When data is received from server it sends to Redux State</li>
  <li>Page renders is ok (because initial state was empty).</li>
  </ol>
  <p>Then I click on another card and here's the problem:
  5) I click on another card and send GET request for the new date.
  6) At this moment state stores previous card data and renders it
  7) New data comes from servers and renders.
  8) For time very small amount of time I see previous card data ...it's flickring. Gif below</p>
  <p><a href="https://i.stack.imgur.com/HxoXq.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HxoXq.gif" alt="enter image description here" /></a></p>
  <p><strong>My question is:</strong> should I reset card state to its initial state (empty state) when clicking on a card? Or there should be another way to do this?</p>
  <p>Second problem:
  To fix first propblem I addeed onClick function which resets card state to its initial state:</p>
  <pre><code>const initialState: IMovieState = {
    movie: {
      filmId: 0,
      nameRu: '',
      nameEn: '',
      webUrl: '',
      posterUrl: '',
      year: 0,
      filmLength: '',
      slogan: '',
      description: '',
      type: '',
      countries: [],
      genres: [],
      rating: {
        rating: 0,
        ratingVoteCount: 0,
        ratingImdb: 0,
        ratingImdbVoteCount: 0,
      },
      images: {
        posters: [],
      },
    },
    isLoading: false,
    movieError: null,
  };
  </code></pre>
  <p>This seems to fix problem 1, but there's another...on page Load there's yellow button and image's alt data (which fail to load) is visible at the top left corner. Gif below.
  <a href="https://i.stack.imgur.com/1sMg0.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1sMg0.gif" alt="enter image description here" /></a></p>
  <p><strong>My question is:</strong> should I add a condition: if object key (no matter what key) has data then render it or should I add a new key in state something like isData: false/true and condition will be if data=true then render it.</p>
  <p>MoviePage.tsx</p>
  <pre><code>interface IMovieProps {
    filmId: string;
  }
  
  const MoviePage: React.FC = () =&gt; {
    const { filmId } = useParams&lt;IMovieProps&gt;();
    const dispatch = useDispatch();
    const { isLoading, movie, movieError } = useTypedSelector((state) =&gt; state.singleMovie);
    const { nameRu, nameEn, description, posterUrl, year, genres, filmLength } = movie;
    
    useEffect(() =&gt; {
      dispatch(fetchMovie(filmId));
    }, [filmId, dispatch]);
  
  
    return (
      &lt;section className={styles.section}&gt;
  
        &lt;div className={styles.backgroundImage} style={{ backgroundImage: `url(${posterUrl})` }} /&gt;
  
        {isLoading &amp;&amp; &lt;Preloader /&gt;}
  
        {!isLoading &amp;&amp; !!movieError &amp;&amp; &lt;Message message={movieError} /&gt;}
  
        {!isLoading &amp;&amp; !movieError &amp;&amp; (
          &lt;&gt;
            &lt;GoBackLink text={'Назад'} /&gt;
  
            &lt;div className={styles.content}&gt;
              &lt;img src={posterUrl} alt='Постер' className={styles.poster} /&gt;
              &lt;div&gt;
                &lt;h1 className={styles.title}&gt;{nameRu}&lt;/h1&gt;
                &lt;h2 className={styles.subtitle}&gt;
                  {nameEn &amp;&amp; `${nameEn}, `}
                  &lt;span&gt;{year}&lt;/span&gt;
                &lt;/h2&gt;
                {filmLength &amp;&amp; &lt;p className={styles.subtitle}&gt;Продолжительность: {filmLength} ч&lt;/p&gt;}
  
                &lt;ul className={styles.genresList}&gt;
                  {genres.map(({ genre }, idx) =&gt; (
                    &lt;Genres genre={genre} key={idx} /&gt;
                  ))}
                &lt;/ul&gt;
  
                {description &amp;&amp; (
                  &lt;&gt;
                    &lt;h3 className={styles.heading}&gt;Описание&lt;/h3&gt;
                    &lt;p className={styles.text}&gt;{description}&lt;/p&gt;
                  &lt;/&gt;
                )}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/&gt;
        )}
      &lt;/section&gt;
    );
  };
  
  export default MoviePage;
  </code></pre>
  <p>State of a card on click:
  <a href="https://i.stack.imgur.com/6Qwfw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Qwfw.png" alt="enter image description here" /></a></p>