diff --git a/components/SummaryTemplate.tsx b/components/SummaryTemplate.tsx index 04ab822..09099bd 100644 --- a/components/SummaryTemplate.tsx +++ b/components/SummaryTemplate.tsx @@ -69,6 +69,7 @@ function formatTimestamp(timestamp: any) { const SummaryTemplate = ({ updateMeetings }: SummaryTemplateProps) => { const [loading, setLoading] = useState(false); const { myVariable, setMyVariable } = useMyVariable(); + const [creatingDoc, setCreatingDoc] = useState(false); const today = new Date().toISOString().split('T')[0]; const defaultFormData = { @@ -120,9 +121,11 @@ const SummaryTemplate = ({ updateMeetings }: SummaryTemplateProps) => { const currentOrder = myVariable.agendaItemOrder ? myVariable.agendaItemOrder[myVariable.workgroup?.workgroup] : undefined; async function handleCreateGoogleDoc() { + setCreatingDoc(true); // Set creatingDoc to true when the button is clicked + try { const markdown = generateMarkdown(myVariable.summary, currentOrder); - console.log("markdown", markdown) + //console.log("markdown", markdown); const response = await axios.post('/api/createGoogleDoc', { markdown, workgroup: myVariable.workgroup?.workgroup, @@ -132,8 +135,10 @@ const SummaryTemplate = ({ updateMeetings }: SummaryTemplateProps) => { } catch (error) { console.error('Error creating Google Doc:', error); alert('There was an error creating the Google Doc.'); + } finally { + setCreatingDoc(false); // Set creatingDoc to false after completion } - } + } useEffect(() => { // Set the local state whenever myVariable.summary changes @@ -286,8 +291,13 @@ const SummaryTemplate = ({ updateMeetings }: SummaryTemplateProps) => { type="button" onClick={handleCreateGoogleDoc} className={styles['export-button']} + disabled={creatingDoc} > - Create Google Doc + {creatingDoc ? ( + Creating Google Doc... + ) : ( + "Create Google Doc" + )} )} diff --git a/styles/typea.module.css b/styles/typea.module.css index c4e4b36..ff3f5cd 100644 --- a/styles/typea.module.css +++ b/styles/typea.module.css @@ -263,4 +263,12 @@ font-weight: bold; } +@keyframes flash { + 0% { opacity: 1; } + 50% { opacity: 0; } + 100% { opacity: 1; } +} +.flashing-text { + animation: flash 1s infinite; +}