feat: add loading state to home screen while fetching exercises

src/screens/Home.tsx

@@ -13,8 +13,10 @@ import { ExerciseCard } from '@components/ExerciseCard';
 import { Group } from '@components/Group';
 import { HomeHeader } from '@components/HomeHeader';
 import { ToastMessage } from '@components/ToastMessage';
+import { Loading } from '@components/Loading';
 
 export function Home() {
+  const [isLoading, setIsLoading] = useState(true);
   const [exercises, setExercises] = useState<ExerciseDTO[]>([]);
   const [groups, setGroups] = useState<string[]>([]);
   const [selectedGroup, setSelectedGroup] = useState('costas');
@@ -44,6 +46,7 @@ export function Home() {
 
   async function fetchExercisesForGroup(group: string) {
     try {
+      setIsLoading(true);
       const response = await api.get(`/exercises/bygroup/${selectedGroup}`);
       setExercises(response.data);
     } catch (error) {
@@ -55,6 +58,8 @@ export function Home() {
           <ToastMessage id={id} title={title} action="error" onClose={() => toast.close(id)} />
         ),
       });
+    } finally {
+      setIsLoading(false);
     }
   }
 
@@ -92,6 +97,9 @@ export function Home() {
         }}
       />
 
+      {isLoading ? (
+        <Loading />
+      ) : (
         <VStack px="$8" flex={1}>
           <HStack justifyContent="space-between" mb="$5" alignItems="center">
             <Heading color="$gray200" fontSize="$md">
@@ -113,6 +121,7 @@ export function Home() {
             contentContainerStyle={{ paddingBottom: 20 }}
           />
         </VStack>
+      )}
     </VStack>
   );
 }