diff --git a/app/components/listaVozes.tsx b/app/components/listaVozes.tsx index 4b733d9..76cc990 100644 --- a/app/components/listaVozes.tsx +++ b/app/components/listaVozes.tsx @@ -1,14 +1,15 @@ "use client"; import React, { useEffect, useState } from 'react'; -import { CssBaseline, Container, Grid, Button, ThemeProvider } from '@mui/material'; +import { CssBaseline, Container, Grid, Button, ThemeProvider, CircularProgress } from '@mui/material'; import TextInput from './textInput'; import VoiceSelect from './voiceSelect'; import VoiceDetails from './voiceDetails'; import darkTheme from './theme'; import { Voice } from '../types/voice'; -const fetchVoices = async (setVozes: React.Dispatch>) => { +const fetchVoices = async (setVozes: React.Dispatch>, setLoadingVoiceSelect: React.Dispatch>) => { + setLoadingVoiceSelect(true); try { const response = await fetch('/api/voices'); if (!response.ok) { @@ -18,11 +19,13 @@ const fetchVoices = async (setVozes: React.Dispatch>) => { - setLoadingVoiceId(voiceId); +const handlePlay = async (voiceId: string, texto: string, setVoiceLoadingState: React.Dispatch>) => { + setVoiceLoadingState(`play-${voiceId}`); try { const response = await fetch("/api/get-audio", { method: "POST", @@ -40,12 +43,12 @@ const handlePlay = async (voiceId: string, texto: string, setLoadingVoiceId: Rea } catch (error) { console.error("Erro ao obter o áudio:", error); } finally { - setLoadingVoiceId(null); + setVoiceLoadingState(null); } }; -const handleDownload = async (voiceId: string, texto: string, setLoadingVoiceId: React.Dispatch>) => { - setLoadingVoiceId(voiceId); +const handleDownload = async (voiceId: string, texto: string, setVoiceLoadingState: React.Dispatch>) => { + setVoiceLoadingState(`download-${voiceId}`); try { const response = await fetch("/api/get-audio", { method: "POST", @@ -70,18 +73,19 @@ const handleDownload = async (voiceId: string, texto: string, setLoadingVoiceId: } catch (error) { console.error("Erro ao baixar o áudio:", error); } finally { - setLoadingVoiceId(null); + setVoiceLoadingState(null); } }; const ListaVozes: React.FC = () => { const [vozes, setVozes] = useState([]); const [texto, setTexto] = useState(''); - const [loadingVoiceId, setLoadingVoiceId] = useState(null); + const [loadingVoiceSelect, setLoadingVoiceSelect] = useState(false); + const [voiceLoadingState, setVoiceLoadingState] = useState(null); const [selectedVoice, setSelectedVoice] = useState(null); useEffect(() => { - fetchVoices(setVozes); + fetchVoices(setVozes, setLoadingVoiceSelect); }, []); return ( @@ -95,14 +99,18 @@ const ListaVozes: React.FC = () => { onChange={(e) => setTexto(e.target.value)} placeholder="Digite o texto aqui" /> - { - const selected = vozes.find(voice => voice.voice_id === voiceId); - setSelectedVoice(selected || null); - }} - /> + {loadingVoiceSelect ? ( + + ) : ( + { + const selected = vozes.find(voice => voice.voice_id === voiceId); + setSelectedVoice(selected || null); + }} + /> + )} {selectedVoice && ( @@ -113,20 +121,20 @@ const ListaVozes: React.FC = () => { )} diff --git a/app/components/voiceSelect.tsx b/app/components/voiceSelect.tsx index c530324..0189023 100644 --- a/app/components/voiceSelect.tsx +++ b/app/components/voiceSelect.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Select, MenuItem, IconButton } from '@mui/material'; +import { Select, MenuItem } from '@mui/material'; import { Voice } from '../types/voice'; interface VoiceSelectProps { diff --git a/app/globals.css b/app/globals.css index d08eb39..4fdb69f 100644 --- a/app/globals.css +++ b/app/globals.css @@ -73,6 +73,7 @@ html, body { max-width: 100vw; overflow-x: hidden; + min-height: 100vh; } body {