add fps graph

package.json

@@ -42,6 +42,7 @@
 		"react-colorful": "^5.6.1",
 		"react-device-detect": "^2.2.3",
 		"react-dom": "^18.2.0",
+		"react-fps-stats": "^0.3.1",
 		"react-hook-form": "^7.46.1",
 		"react-infinite-scroll-component": "^6.1.0",
 		"react-loading-skeleton": "^3.3.1",

pnpm-lock.yaml

@@ -119,6 +119,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-fps-stats:
+    specifier: ^0.3.1
+    version: 0.3.1(prop-types@15.8.1)(react@18.2.0)
   react-hook-form:
     specifier: ^7.46.1
     version: 7.46.1(react@18.2.0)
@@ -11233,6 +11236,16 @@ packages:
     resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
     dev: true
 
+  /react-fps-stats@0.3.1(prop-types@15.8.1)(react@18.2.0):
+    resolution: {integrity: sha512-SwjJd8eK6XQseXF0DjOv0PotfzSkIm9yhqsggEaJHhPgKq0P7QcL5xuLy/UlOFGjFbRMHRp1w8b8wJfoWNR3uA==}
+    peerDependencies:
+      prop-types: ^15.6.2
+      react: '>=16'
+    dependencies:
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /react-hook-form@7.46.1(react@18.2.0):
     resolution: {integrity: sha512-0GfI31LRTBd5tqbXMGXT1Rdsv3rnvy0FjEk8Gn9/4tp6+s77T7DPZuGEpBRXOauL+NhyGT5iaXzdIM2R6F/E+w==}
     engines: {node: '>=12.22.0'}

src/App.tsx

@@ -19,6 +19,8 @@ import SwipeTest from "./pages/SwipeTest";
 import ChannelPage from "./pages/subpages/ChannelPage";
 import { useAppStore } from "./stores/AppStore";
 import { Globals } from "./utils/Globals";
+// @ts-expect-error no types
+import FPSStats from "react-fps-stats";
 
 function App() {
 	const app = useAppStore();
@@ -70,6 +72,7 @@ function App() {
 
 	return (
 		<ErrorBoundary section="app">
+			{app.fpsShown && <FPSStats />}
 			<Loader>
 				<Routes>
 					<Route index path="/" element={<AuthenticationGuard component={AppPage} />} />

src/components/modals/SettingsModal.tsx

@@ -1,4 +1,5 @@
 import { useModals } from "@mattjennings/react-modal-stack";
+import { FormControlLabel, FormGroup, Switch } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { useAppStore } from "../../stores/AppStore";
 import { GIT_BRANCH, GIT_REVISION, REPO_URL } from "../../utils/revison";
@@ -78,6 +79,18 @@ function SettingsModal(props: AnimatedModalProps) {
 									({GIT_BRANCH})
 								</Link>
 							</div>
+
+							<FormGroup>
+								<FormControlLabel
+									control={
+										<Switch
+											checked={app.fpsShown}
+											onChange={(e) => app.setFpsShown(e.target.checked)}
+										/>
+									}
+									label="Show FPS Graph"
+								/>
+							</FormGroup>
 						</ModalFullContent>
 					</ModalFullContentContainerContentWrapper>
 				</ModalFullContentWrapper>

src/stores/AppStore.ts

@@ -31,6 +31,7 @@ export default class AppStore {
 	@observable isNetworkConnected = true;
 	@observable tokenLoaded = false;
 	@observable token: string | null = null;
+	@observable fpsShown: boolean = process.env.NODE_ENV === "development";
 
 	// stores
 	@observable theme: ThemeStore = new ThemeStore();
@@ -132,6 +133,11 @@ export default class AppStore {
 		// try to resolve the channel
 		this.activeChannel = (id ? this.channels.get(id) : null) ?? null;
 	}
+
+	@action
+	setFpsShown(value: boolean) {
+		this.fpsShown = value;
+	}
 }
 
 export const appStore = new AppStore();