✏️ Fix locales, button order and add reload state

next-i18next.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   // https://www.i18next.com/overview/configuration-options#logging
-  debug: process.env.NODE_ENV === 'development',
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de', 'es', 'fr', 'it', 'ja', 'nl', 'ru', 'sv', 'zh'],

public/locales/en/modules/docker.json

@@ -11,7 +11,8 @@
       "name": "Name",
       "image": "Image",
       "ports": "Ports",
-      "state": "State"
+      "state": "State",
+      "addToHomarr": "Add to homarr"
     },
     "body": {
       "portCollapse": "{{ports}} more"
@@ -37,9 +38,8 @@
     "start": {
       "title": "Start"
     },
-    "refreshData": "Refresh data",
-    "addToHomarr": {
-      "title": "Add to Homarr"
+    "refreshData": {
+      "title": "Refresh data"
     },
     "remove": {
       "title": "Remove"

src/modules/docker/ContainerActionBar.tsx

@@ -11,6 +11,7 @@ import {
 import axios from 'axios';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
 import { TFunction } from 'react-i18next';
 
 let t: TFunction<'modules/docker', undefined>;
@@ -61,9 +62,25 @@ export interface ContainerActionBarProps {
 
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
   t = useTranslation('modules/docker').t;
-
+  const [isLoading, setisLoading] = useState(false);
   return (
     <Group>
+      <Button
+        leftIcon={<IconRefresh />}
+        onClick={() => {
+          setisLoading(true);
+          setTimeout(() => {
+            reload();
+            setisLoading(false);
+          }, 750);
+        }}
+        variant="light"
+        color="violet"
+        loading={isLoading}
+        radius="md"
+      >
+        {t('actionBar.refreshData.title')}
+      </Button>
       <Button
         leftIcon={<IconRotateClockwise />}
         onClick={() =>
@@ -112,9 +129,6 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
       >
         {t('actionBar.start.title')}
       </Button>
-      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" color="violet" radius="md">
-        {t('actionBar.refreshData.title')}
-      </Button>
       <Button
         leftIcon={<IconTrash />}
         color="red"

src/modules/docker/DockerTable.tsx

@@ -1,4 +1,14 @@
-import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, Modal, ActionIcon, Tooltip } from '@mantine/core';
+import {
+  Table,
+  Checkbox,
+  Group,
+  Badge,
+  createStyles,
+  ScrollArea,
+  TextInput,
+  Modal,
+  ActionIcon,
+} from '@mantine/core';
 import { IconPlus, IconSearch } from '@tabler/icons';
 import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
@@ -71,9 +81,7 @@ export default function DockerTable({
           />
         </td>
         <td>{element.Names[0].replace('/', '')}</td>
-        <td>
-          {element.Image}
-        </td>
+        <td>{element.Image}</td>
         <td>
           <Group>
             {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -99,8 +107,6 @@ export default function DockerTable({
           <ContainerState state={element.State} />
         </td>
         <td>
-          <Group>
-            <Tooltip label={t('table.body.action.addToHomarr')}>
           <ActionIcon
             color="indigo"
             variant="light"
@@ -112,8 +118,6 @@ export default function DockerTable({
           >
             <IconPlus />
           </ActionIcon>
-            </Tooltip>
-          </Group>
         </td>
       </tr>
     );
@@ -158,7 +162,7 @@ export default function DockerTable({
             <th>{t('table.header.image')}</th>
             <th>{t('table.header.ports')}</th>
             <th>{t('table.header.state')}</th>
-            <th>{t('table.header.action')}</th>
+            <th>{t('table.header.addToHomarr')}</th>
           </tr>
         </thead>
         <tbody>{rows}</tbody>