Trying to use getRegionPokemonList endpoint for Loading screen

src/features/Pokedex/Filters/Filters.tsx

@@ -2,13 +2,15 @@ import React, { useEffect } from 'react';
 import {
   useGetRegionListQuery,
   useGetTypeListQuery,
+  useGetRegionPokemonListQuery,
 } from 'features/Pokedex/pokedexApi';
 import {
   setSelectedRegion,
   setSelectedType,
   setSelectedSort,
+  setFetchingRegionPokemonList,
 } from 'features/Pokedex/pokedexSlice';
-import { useAppDispatch } from 'app/hooks';
+import { useAppDispatch, useAppSelector } from 'app/hooks';
 
 const useGetSortOptions = () => {
   const sortOptions = [
@@ -31,16 +33,9 @@ const Filters = () => {
     dispatch(setSelectedSort(event.target.value));
   };
 
-  const {
-    data: regionsData,
-    error: regionsError,
-    isLoading: regionsLoading,
-  } = useGetRegionListQuery();
-  const {
-    data: typesData,
-    error: typesError,
-    isLoading: typesLoading,
-  } = useGetTypeListQuery();
+  const { data: regionsData, isLoading: regionsLoading } =
+    useGetRegionListQuery();
+  const { data: typesData, isLoading: typesLoading } = useGetTypeListQuery();
   const { data: sortOptions } = useGetSortOptions();
 
   // Send the first region as the default selected region
@@ -57,6 +52,21 @@ const Filters = () => {
     }
   }, [typesData, dispatch]);
 
+  const selectedRegion = useAppSelector(state => state.pokedex.selectedRegion);
+
+  const { refetch: refetchRegionPokemonList } = useGetRegionPokemonListQuery(
+    selectedRegion,
+    { skip: !selectedRegion },
+  );
+
+  useEffect(() => {
+    if (selectedRegion) {
+      dispatch(setFetchingRegionPokemonList(true));
+      refetchRegionPokemonList();
+      dispatch(setFetchingRegionPokemonList(false));
+    }
+  }, [selectedRegion, refetchRegionPokemonList]);
+
   return (
     <>
       <div className="filter__container">

src/features/Pokedex/Filters/index.ts

@@ -1 +1,2 @@
 export { default } from './Filters';
+export { default as useFilterLoaded } from './useFilterLoaded';

src/features/Pokedex/Filters/useFilterLoaded.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+import { useGetRegionListQuery, useGetTypeListQuery } from '../pokedexApi';
+
+const useFilterLoaded = () => {
+  const { isLoading: isLoadingRegionList } = useGetRegionListQuery();
+  const { isLoading: isLoadingTypeList } = useGetTypeListQuery();
+  const [isFilterLoaded, setIsFilterLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!isLoadingRegionList && !isLoadingTypeList) {
+      setIsFilterLoaded(true);
+    }
+  }, [isLoadingRegionList, isLoadingTypeList]);
+
+  return isFilterLoaded;
+};
+
+export default useFilterLoaded;

src/features/Pokedex/Pokedex.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import Pokemon from './Pokemon';
 import Filters from './Filters';
-import { useGetRegionListQuery, useGetTypeListQuery } from './pokedexApi';
 import Loading from 'components/Loading';
 
 import charizard from 'features/Pokedex/Pokemon/assets/stories/charizard.svg';
+import { useAppSelector } from 'app/hooks';
 
 const Pokedex = () => {
-  const { isLoading: isLoadingRegionList } = useGetRegionListQuery();
-  const { isLoading: isLoadingTypeList } = useGetTypeListQuery();
-
+  const isFetchingRegionPokemonList = useAppSelector(
+    state => state.pokedex.fetchingRegionPokemonList,
+  );
   return (
     <>
       <Filters />
-      {isLoadingRegionList && isLoadingTypeList ? (
+      {isFetchingRegionPokemonList ? (
         <Loading />
       ) : (
         <Pokemon

src/features/Pokedex/Pokemon/Pokemon.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import Pokemon, { PokemonProps } from './Pokemon';
+import Pokemon, { PokemonCardProps } from './Pokemon';
 
 import charizard_svg from './assets/stories/charizard.svg';
 import charizard_info from './assets/stories/charizard.json';
@@ -12,7 +12,7 @@ export default {
   component: Pokemon,
 } as ComponentMeta<typeof Pokemon>;
 
-const Template: ComponentStory<typeof Pokemon> = (args: PokemonProps) => (
+const Template: ComponentStory<typeof Pokemon> = (args: PokemonCardProps) => (
   <Pokemon {...args} />
 );
 

src/features/Pokedex/pokedexApi.ts

@@ -3,6 +3,7 @@ import {
   pokeApiAllPagesCustomBaseQuery,
   pokeApiFullListFetchArgs,
 } from './paginationBaseQuery';
+import { setFetchingRegionPokemonList } from './pokedexSlice';
 import {
   AreaResponseData,
   LocationResponseData,
@@ -67,6 +68,8 @@ export const pokedexApi = createApi({
     }),
     getRegionPokemonList: builder.query<PokemonListItem[], number | string>({
       async queryFn(regionIdOrName, api) {
+        api.dispatch(setFetchingRegionPokemonList(true));
+
         // Get region data
         const regionData: RegionResponseData = await api
           .dispatch(pokedexApi.endpoints.getRegion.initiate(regionIdOrName))
@@ -119,6 +122,8 @@ export const pokedexApi = createApi({
           ),
         );
 
+        api.dispatch(setFetchingRegionPokemonList(false));
+
         return { data: Array.from(pokemonDataList) };
       },
     }),
@@ -134,4 +139,5 @@ export const {
   useGetTypeQuery,
   useGetAreaQuery,
   useGetLocationQuery,
+  useGetRegionPokemonListQuery,
 } = pokedexApi;

src/features/Pokedex/pokedexSlice.ts

@@ -2,12 +2,15 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { PokemonProps } from './Pokemon';
 import type { RootState } from 'app/store';
+import { nameUrlPair } from './types/api';
 
 interface PokedexState {
   selectedRegion: string;
   selectedType: string;
   selectedSort: string;
   pokemonList: PokemonProps[];
+  regionPokemonList: nameUrlPair[];
+  fetchingRegionPokemonList: boolean;
 }
 
 const initialState: PokedexState = {
@@ -15,6 +18,8 @@ const initialState: PokedexState = {
   selectedType: '',
   selectedSort: '',
   pokemonList: [],
+  regionPokemonList: [],
+  fetchingRegionPokemonList: false,
 };
 
 export const pokedexSlice = createSlice({
@@ -30,10 +35,21 @@ export const pokedexSlice = createSlice({
     setSelectedSort: (state, action: PayloadAction<string>) => {
       state.selectedSort = action.payload;
     },
+    setFetchingRegionPokemonList: (state, action: PayloadAction<boolean>) => {
+      state.fetchingRegionPokemonList = action.payload;
+    },
+    setRegionPokemonList: (state, action: PayloadAction<nameUrlPair[]>) => {
+      state.regionPokemonList = action.payload;
+    },
   },
 });
 
-export const { setSelectedRegion, setSelectedType, setSelectedSort } =
-  pokedexSlice.actions;
+export const {
+  setSelectedRegion,
+  setSelectedType,
+  setSelectedSort,
+  setFetchingRegionPokemonList,
+  setRegionPokemonList,
+} = pokedexSlice.actions;
 
 export default pokedexSlice.reducer;