From 78547f99fe168678862b3522a07a983c536eed65 Mon Sep 17 00:00:00 2001
From: KavetiRohith <rohitkaveti@gmail.com>
Date: Mon, 11 Sep 2023 02:49:57 -0700
Subject: [PATCH] Render spinner when genrelist is loading

---
 src/components/GenreList.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/GenreList.tsx b/src/components/GenreList.tsx
index 6afbdd3..8888c8f 100644
--- 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>}