web: mejoras varias

jacargentina · Jun 7, 2024 · 80375ad · 80375ad
1 parent 2322cd5
commit 80375ad
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 30 deletions.
diff --git a/packages/web/app/components/PdfContext.tsx b/packages/web/app/components/PdfContext.tsx
@@ -51,7 +51,6 @@ const PdfContextWrapper = (props: any) => {
         }
       })
       .then((data) => {
-        setLoading(false);
         if (data instanceof Blob) {
           setPdfUrl(window.URL.createObjectURL(new Blob([data])));
         } else {
@@ -64,7 +63,6 @@ const PdfContextWrapper = (props: any) => {
 
   useEffect(() => {
     if (pdfUrl) {
-      setLoading(true);
       const loadingTask = pdfjsLib.getDocument(pdfUrl);
       loadingTask.promise
         .then((doc) => {

diff --git a/packages/web/app/components/SongList.tsx b/packages/web/app/components/SongList.tsx
@@ -49,21 +49,19 @@ const SongList = (props: { songs: Array<Song> }) => {
     return songs.filter((s) => s.notTranslated === true).length;
   }, [songs]);
 
-  const savedSettings =
-    typeof localStorage !== 'undefined'
-      ? localStorage.getItem('pdfExportOptions')
-      : undefined;
-
   const {
     previewPdf,
     pdf,
+    loading: pdfLoading,
     numPages,
     currPage,
     setCurrPage,
     downloadPdf,
     closePdf,
   } = usePdf();
 
+  const isProcessing = loading || pdfLoading;
+
   const [filters, setFilters] = useState(() => {
     if (typeof localStorage !== 'undefined') {
       const savedFilters = localStorage.getItem('filters');
@@ -193,30 +191,36 @@ const SongList = (props: { songs: Array<Song> }) => {
         {pdf && (
           <>
             <Menu.Item>
-              <Button
-                size="mini"
-                floated="right"
-                onClick={() => {
-                  setActiveDialog('pdfSettings');
-                  setDialogCallback(() => {
-                    return () => previewPdf('full', '');
-                  });
-                }}>
-                <Icon name="setting" />
-                {i18n.t('screen_title.settings')}
-              </Button>
+              <Button.Group size="mini">
+                <Button
+                  size="mini"
+                  floated="right"
+                  onClick={() => {
+                    setActiveDialog('pdfSettings');
+                    setDialogCallback(() => {
+                      return () => previewPdf('full', '');
+                    });
+                  }}>
+                  <Icon name="setting" />
+                  {i18n.t('screen_title.settings')}
+                </Button>
+              </Button.Group>
             </Menu.Item>
             <Menu.Item>
-              <Button onClick={downloadPdf}>
-                <Icon name="file pdf" />
-                {i18n.t('ui.download')}
-              </Button>
+              <Button.Group size="mini">
+                <Button onClick={downloadPdf}>
+                  <Icon name="file pdf" />
+                  {i18n.t('ui.download')}
+                </Button>
+              </Button.Group>
             </Menu.Item>
             <Menu.Item position="right">
-              <Button onClick={closePdf}>
-                <Icon name="close" />
-                {i18n.t('ui.close')}
-              </Button>
+              <Button.Group size="mini">
+                <Button onClick={closePdf}>
+                  <Icon name="close" />
+                  {i18n.t('ui.close')}
+                </Button>
+              </Button.Group>
             </Menu.Item>
           </>
         )}
@@ -237,7 +241,9 @@ const SongList = (props: { songs: Array<Song> }) => {
                     }
                   />
                 )}
-                <Button onClick={() => previewPdf('full', '')}>
+                <Button
+                  onClick={() => previewPdf('full', '')}
+                  disabled={pdfLoading}>
                   <Icon name="file pdf" />
                   {i18n.t('share_action.view pdf')}
                 </Button>
@@ -285,7 +291,7 @@ const SongList = (props: { songs: Array<Song> }) => {
           </>
         )}
       </Menu>
-      {!pdf && !loading && (
+      {!pdf && !isProcessing && (
         <>
           <div style={{ padding: 10 }}>
             <Input
@@ -374,7 +380,7 @@ const SongList = (props: { songs: Array<Song> }) => {
           </List>
         </>
       )}
-      {loading && (
+      {isProcessing && (
         <div
           style={{
             height: '100%',