Move Loading screen into Pokedex.tsx

src/App.tsx

@@ -2,18 +2,8 @@ import React from 'react';
 import './App.css';
 import Header from 'components/Header';
 import Pokedex from './features/Pokedex';
-import { useGetPokemonListQuery } from './features/Pokedex/pokedexApi';
-import Loading from './components/Loading';
 
 function App() {
-  const { data, error, isLoading } = useGetPokemonListQuery(100);
-  if (isLoading) {
-    return (
-      <div className="App app_container">
-        <Loading />
-      </div>
-    );
-  }
   return (
     <div className="App app_container">
       <Header />

src/features/Pokedex/Pokedex.tsx

@@ -1,19 +1,27 @@
 import React from 'react';
 import Pokemon from './Pokemon';
 import Filters from './Filters';
+import { useGetPokemonListQuery } from './pokedexApi';
+import Loading from 'components/Loading';
 
 import charizard from 'features/Pokedex/Pokemon/assets/stories/charizard.svg';
 
 const Pokedex = () => {
+  const { data, error, isLoading } = useGetPokemonListQuery(100);
+
   return (
     <>
       <Filters />
-      <Pokemon
+      {isLoading ? (
-        name={'Charizard'}
+        <Loading />
-        number={6}
+      ) : (
-        image={charizard}
+        <Pokemon
-        types={['fire', 'flying']}
+          name={'Charizard'}
-      />
+          number={6}
+          image={charizard}
+          types={['fire', 'flying']}
+        />
+      )}
     </>
   );
 };