Merge branch 'dev' into change-title-icons

src/components/AppShelf/AddAppShelfItem.tsx

@@ -300,21 +300,20 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
               />
             </>
           )}
-          {form.values.type === 'Deluge' ||
-            (form.values.type === 'Transmission' && (
-              <>
-                <TextInput
-                  required
-                  label="Password"
-                  placeholder="password"
-                  value={form.values.password}
-                  onChange={(event) => {
-                    form.setFieldValue('password', event.currentTarget.value);
-                  }}
-                  error={form.errors.password && 'Invalid password'}
-                />
-              </>
-            ))}
+          {(form.values.type === 'Deluge' || form.values.type === 'Transmission') && (
+            <>
+              <TextInput
+                required
+                label="Password"
+                placeholder="password"
+                value={form.values.password}
+                onChange={(event) => {
+                  form.setFieldValue('password', event.currentTarget.value);
+                }}
+                error={form.errors.password && 'Invalid password'}
+              />
+            </>
+          )}
         </Group>
 
         <Group grow position="center" mt="xl">

src/components/AppShelf/AppShelf.tsx

@@ -19,7 +19,6 @@ import { ModuleWrapper } from '../modules/moduleWrapper';
 import { DownloadsModule } from '../modules';
 
 const useStyles = createStyles((theme, _params) => ({
-
   item: {
     borderBottom: 0,
     overflow: 'hidden',
@@ -31,7 +30,6 @@ const useStyles = createStyles((theme, _params) => ({
   itemOpened: {
     borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
   },
-
 }));
 
 const AppShelf = (props: any) => {

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({