Refactor HistoryDisplay component to streamline imports and enhance layout structure. Consolidate loading state handling and improve chart rendering logic for better performance and user experience.

src/components/Dashboard/common/HistoryDisplay.jsx

@@ -1,13 +1,5 @@
 import { useEffect, useState, useContext, useMemo } from 'react'
-import {
-  Card,
-  Segmented,
-  Flex,
-  Popover,
-  DatePicker,
-  Button,
-  Space
-} from 'antd'
+import { Card, Segmented, Flex, Popover, DatePicker, Button, Space } from 'antd'
 import {
   ResponsiveContainer,
   BarChart,
@@ -25,9 +17,9 @@ import { ApiServerContext } from '../context/ApiServerContext'
 import { AuthContext } from '../context/AuthContext'
 import dayjs from 'dayjs'
 import { useThemeContext } from '../context/ThemeContext'
-import LoadingPlaceholder from './LoadingPlaceholder'
 import MissingPlaceholder from './MissingPlaceholder'
 import CheckIcon from '../../Icons/CheckIcon'
+import { LoadingOutlined } from '@ant-design/icons'
 
 const HistoryDisplay = ({
   objectType,
@@ -291,7 +283,8 @@ const HistoryDisplay = ({
   })
 
   const chartRows = Array.from(
-    chartData.reduce((acc, item) => {
+    chartData
+      .reduce((acc, item) => {
         const existing = acc.get(item.date) || {
           date: item.date,
           dateFormatted: item.dateFormatted
@@ -299,7 +292,8 @@ const HistoryDisplay = ({
         existing[item.category] = item.value
         acc.set(item.date, existing)
         return acc
-    }, new Map()).values()
+      }, new Map())
+      .values()
   ).sort((a, b) => new Date(a.date) - new Date(b.date))
 
   const customTimeRangeContent = (
@@ -334,6 +328,7 @@ const HistoryDisplay = ({
       style={{ width: '100%' }}
       styles={{ body: { padding: '12px', ...styles } }}
     >
+      <Flex gap='small' vertical>
         {!startDate && !endDate && (
           <Flex justify='space-between'>
             <Flex align='center' gap='5px'>
@@ -354,6 +349,8 @@ const HistoryDisplay = ({
               </Popover>
             </Flex>
 
+            <Flex gap='middle'>
+              {loading == true && <LoadingOutlined />}
               <Segmented
                 size='small'
                 options={[
@@ -368,10 +365,6 @@ const HistoryDisplay = ({
                 disabled={loading}
               />
             </Flex>
-      )}
-      {loading == true && (
-        <Flex justify='center' align='center' style={{ height: `${height}px` }}>
-          <LoadingPlaceholder message='Loading history data...' />
           </Flex>
         )}
         {chartRows.length > 0 && (
@@ -384,10 +377,16 @@ const HistoryDisplay = ({
                 />
                 <XAxis
                   dataKey='dateFormatted'
-                tick={{ fill: isDarkMode ? '#d9d9d9' : '#595959', fontSize: 12 }}
+                  tick={{
+                    fill: isDarkMode ? '#d9d9d9' : '#595959',
+                    fontSize: 12
+                  }}
                 />
                 <YAxis
-                tick={{ fill: isDarkMode ? '#d9d9d9' : '#595959', fontSize: 12 }}
+                  tick={{
+                    fill: isDarkMode ? '#d9d9d9' : '#595959',
+                    fontSize: 12
+                  }}
                 />
                 <Tooltip
                   contentStyle={{
@@ -413,10 +412,15 @@ const HistoryDisplay = ({
           </div>
         )}
         {loading == false && chartRows.length == 0 && (
-        <Flex justify='center' align='center' style={{ height: `${height}px` }}>
+          <Flex
+            justify='center'
+            align='center'
+            style={{ height: `${height}px` }}
+          >
             <MissingPlaceholder message='No data available.' />
           </Flex>
         )}
+      </Flex>
     </Card>
   )
 }