From 76e45bed1451c4706a0e924a52aa4d4d52014f98 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Thu, 18 Jul 2024 14:52:56 -0400
Subject: [PATCH] move rendering of server stats into child to prevent rerender
---
src/renderer/components/Header.tsx | 81 ++++++++++++++++--------------
1 file changed, 44 insertions(+), 37 deletions(-)
diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx
index a19fc74f..ff532e7d 100644
--- a/src/renderer/components/Header.tsx
+++ b/src/renderer/components/Header.tsx
@@ -8,7 +8,7 @@ import { Link2Icon } from 'lucide-react';
import { formatBytes } from 'renderer/lib/utils';
import ModelCurrentlyPlayingBar from './ModelCurrentlyPlayingBar';
-export default function Header({ connection, setConnection, experimentInfo }) {
+function StatsBar({ connection, setConnection }) {
const [cs, setCS] = useState({ cpu: [0], gpu: [0], mem: [0] });
const { server, isLoading, isError } = useServerStats();
@@ -67,43 +67,8 @@ export default function Header({ connection, setConnection, experimentInfo }) {
setConnection('');
}
}, [isError]);
-
return (
- <Sheet
- sx={{
- gridArea: 'header',
- display: 'flex',
- alignItems: 'center',
- gap: 0,
- top: 0,
- width: '100%',
- height: '100%',
- zIndex: 1000,
- p: 0,
- color: '#888',
- userSelect: 'none',
- backgroundColor: 'var(--joy-palette-background-level1)',
- }}
- className="header"
- >
- <div
- id="currently-playing"
- style={{
- backgroundColor: 'var(--joy-palette-background-level1)',
- // border: '1px solid red',
- height: '100%',
- padding: 0,
- margin: 0,
- flex: '1',
- justifyContent: 'center',
- alignItems: 'center',
- display: 'flex',
- '-webkit-app-region': 'drag',
- }}
- >
- <ModelCurrentlyPlayingBar experimentInfo={experimentInfo} />
- </div>
-
+ <>
{isError ? (
<div
style={{
@@ -270,6 +235,48 @@ export default function Header({ connection, setConnection, experimentInfo }) {
</div>
</div>
)}
+ </>
+ );
+}
+
+export default function Header({ connection, setConnection, experimentInfo }) {
+ return (
+ <Sheet
+ sx={{
+ gridArea: 'header',
+ display: 'flex',
+ alignItems: 'center',
+ gap: 0,
+ top: 0,
+ width: '100%',
+ height: '100%',
+ zIndex: 1000,
+ p: 0,
+ color: '#888',
+ userSelect: 'none',
+ backgroundColor: 'var(--joy-palette-background-level1)',
+ }}
+ className="header"
+ >
+ <div
+ id="currently-playing"
+ style={{
+ backgroundColor: 'var(--joy-palette-background-level1)',
+ // border: '1px solid red',
+ height: '100%',
+ padding: 0,
+ margin: 0,
+ flex: '1',
+ justifyContent: 'center',
+ alignItems: 'center',
+ display: 'flex',
+ '-webkit-app-region': 'drag',
+ }}
+ >
+ <ModelCurrentlyPlayingBar experimentInfo={experimentInfo} />
+ </div>
+
+ <StatsBar connection={connection} setConnection={setConnection} />
</Sheet>
);
}
--
GitLab