Update dashboard widgets (#12068)

- Display loading overlay
- Fix bottom of chart to zero

src/frontend/src/components/dashboard/widgets/OrderHistoryWidget.tsx

@@ -4,7 +4,7 @@ import { apiUrl } from '@lib/functions/Api';
 import { StylishText } from '@lib/index';
 import { t } from '@lingui/core/macro';
 import { BarChart } from '@mantine/charts';
-import { Stack } from '@mantine/core';
+import { Box, LoadingOverlay, Stack } from '@mantine/core';
 import { useDocumentVisibility } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
@@ -84,13 +84,17 @@ function OrderHistoryComponent({
   return (
     <Stack gap='xs'>
       <StylishText size='md'>{title}</StylishText>
-      <BarChart
+      <Box>
-        h={200}
+        <LoadingOverlay visible={query.isLoading || query.isFetching} />
-        data={chartData}
+        <BarChart
-        dataKey='month'
+          h={200}
-        series={[{ name: 'count', label: t`Completed`, color: 'blue.6' }]}
+          data={chartData}
-        withYAxis={false}
+          dataKey='month'
-      />
+          series={[{ name: 'count', label: t`Completed`, color: 'blue.6' }]}
+          withYAxis={false}
+          yAxisProps={{ domain: [0, 'auto'] }}
+        />
+      </Box>
     </Stack>
   );
 }