🐛 Fixing Deluge integration

Thanks to @scttcper for fixing https://github.com/scttcper/deluge/issues/106 so quickly !

src/components/modules/downloads/DownloadsModule.tsx

@@ -1,4 +1,15 @@
-import { Table, Text, Tooltip, Title, Group, Progress, Skeleton, ScrollArea } from '@mantine/core';
+import {
+  Table,
+  Text,
+  Tooltip,
+  Title,
+  Group,
+  Progress,
+  Skeleton,
+  ScrollArea,
+  Center,
+  Image,
+} from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';
 import axios from 'axios';
@@ -34,14 +45,18 @@ export default function DownloadComponent() {
     (config?.modules?.[DownloadsModule.title]?.options?.hidecomplete?.value as boolean) ?? false;
   const [torrents, setTorrents] = useState<NormalizedTorrent[]>([]);
   const setSafeInterval = useSetSafeInterval();
+  const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
+    setIsLoading(true);
+    if (downloadServices.length === 0) return;
     setSafeInterval(() => {
       // Send one request with each download service inside
       axios.post('/api/modules/downloads', { config }).then((response) => {
         setTorrents(response.data);
+        setIsLoading(false);
       });
     }, 1000);
-  }, [config.modules]);
+  }, [config.services]);
 
   if (downloadServices.length === 0) {
     return (
@@ -55,7 +70,7 @@ export default function DownloadComponent() {
     );
   }
 
-  if (torrents.length === 0) {
+  if (isLoading) {
     return (
       <>
         <Skeleton height={40} mt={10} />
@@ -115,14 +130,24 @@ export default function DownloadComponent() {
       </tr>
     );
   });
+
+  const easteregg = (
+    <Center style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Image fit="cover" height={300} src="https://danjohnvelasco.github.io/images/empty.png" />
+    </Center>
+  );
   return (
     <Group noWrap grow direction="column">
       <Title order={4}>Your torrents</Title>
       <ScrollArea sx={{ height: 300 }}>
-        <Table highlightOnHover>
-          <thead>{ths}</thead>
-          <tbody>{rows}</tbody>
-        </Table>
+        {rows.length > 0 ? (
+          <Table highlightOnHover>
+            <thead>{ths}</thead>
+            <tbody>{rows}</tbody>
+          </Table>
+        ) : (
+          easteregg
+        )}
       </ScrollArea>
     </Group>
   );

src/components/modules/downloads/TotalDownloadsModule.tsx

@@ -73,12 +73,13 @@ export default function TotalDownloadsComponent() {
   const totalDownloadSpeed = torrents.reduce((acc, torrent) => acc + torrent.downloadSpeed, 0);
   const totalUploadSpeed = torrents.reduce((acc, torrent) => acc + torrent.uploadSpeed, 0);
   useEffect(() => {
+    if (downloadServices.length === 0) return;
     setSafeInterval(() => {
       axios.post('/api/modules/downloads', { config }).then((response) => {
         setTorrents(response.data);
       });
     }, 1000);
-  }, []);
+  }, [config.services]);
 
   useEffect(() => {
     torrentHistoryHandlers.append({