Render spinner when genrelist is loading

KavetiRohith · Sep 11, 2023 · 78547f9 · 78547f9
1 parent f71f76a
commit 78547f9
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/src/components/GenreList.tsx b/src/components/GenreList.tsx
@@ -1,4 +1,12 @@
-import { HStack, Image, List, Text, ListItem, Button } from "@chakra-ui/react";
+import {
+  HStack,
+  Image,
+  List,
+  Text,
+  ListItem,
+  Button,
+  Spinner,
+} from "@chakra-ui/react";
 import useGenres, { Genre } from "../hooks/useGenres";
 import getCroppedImageUrl from "../services/image-url";
 
@@ -7,7 +15,9 @@ interface GenreListProps {
 }
 
 const GenreList = ({ onSelectGenre }: GenreListProps) => {
-  const { genres, error } = useGenres();
+  const { genres, isLoading, error } = useGenres();
+  if (isLoading) return <Spinner />;
+
   return (
     <>
       {error && <Text>{error}</Text>}