diff --git a/striker-ui/components/CPU.tsx b/striker-ui/components/CPU.tsx index 56693e0f..526d0f58 100644 --- a/striker-ui/components/CPU.tsx +++ b/striker-ui/components/CPU.tsx @@ -1,37 +1,40 @@ -import { useContext } from 'react'; -import { Box } from '@mui/material'; -import { Panel } from './Panels'; -import { HeaderText, BodyText } from './Text'; -import periodicFetch from '../lib/fetchers/periodicFetch'; +import { useContext, useMemo } from 'react'; + import { AnvilContext } from './AnvilContext'; +import FlexBox from './FlexBox'; +import { Panel, PanelHeader } from './Panels'; +import periodicFetch from '../lib/fetchers/periodicFetch'; import Spinner from './Spinner'; +import { HeaderText, BodyText } from './Text'; const CPU = (): JSX.Element => { const { uuid } = useContext(AnvilContext); - const { data, isLoading } = periodicFetch( - `${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`, - ); + const { data: { allocated = 0, cores = 0, threads = 0 } = {}, isLoading } = + periodicFetch( + `${process.env.NEXT_PUBLIC_API_URL}/get_cpu?anvil_uuid=${uuid}`, + ); - const cpuData = - isLoading || !data ? { allocated: 0, cores: 0, threads: 0 } : data; + const contentAreaElement = useMemo( + () => + isLoading ? ( + + ) : ( + + + + + + ), + [allocated, cores, isLoading, threads], + ); return ( - - {!isLoading ? ( - <> - - - - - - - - - ) : ( - - )} + + + + {contentAreaElement} ); };