From 6142d449653ec9216a7a616a00b7f53aa5161ced Mon Sep 17 00:00:00 2001
From: Oscar Beaumont <oscar@otbeaumont.me>
Date: Mon, 2 Oct 2023 21:32:26 +1100
Subject: [PATCH] [ENG-1147] Fix overview stats (#1416)

* Fix it

* Fix slow accounts panel
---
 .../app/$libraryId/overview/Statistics.tsx      | 17 +++++++++++++----
 .../settings/client/SpacedriveAccount.tsx       |  5 ++++-
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/interface/app/$libraryId/overview/Statistics.tsx b/interface/app/$libraryId/overview/Statistics.tsx
index c88b1b79d..8a03ec597 100644
--- a/interface/app/$libraryId/overview/Statistics.tsx
+++ b/interface/app/$libraryId/overview/Statistics.tsx
@@ -4,10 +4,10 @@ import Skeleton from 'react-loading-skeleton';
 
 import 'react-loading-skeleton/dist/skeleton.css';
 
+import { useEffect, useState } from 'react';
 import { byteSize, Statistics, useLibraryContext, useLibraryQuery } from '@sd/client';
 import { Tooltip } from '@sd/ui';
 import { useCounter } from '~/hooks';
-import { usePlatform } from '~/util/Platform';
 
 interface StatItemProps {
 	title: string;
@@ -49,11 +49,17 @@ let mounted = false;
 const StatItem = (props: StatItemProps) => {
 	const { title, bytes, isLoading } = props;
 
+	// This is important to the counter working.
+	// On first render of the counter this will potentially be `false` which means the counter should the count up.
+	// but in a `useEffect` `mounted` will be set to `true` so that subsequent renders of the counter will not run the count up.
+	// The acts as a cache of the value of `mounted` on the first render of this `StateItem`.
+	const [isMounted] = useState(mounted);
+
 	const size = byteSize(bytes);
 	const count = useCounter({
 		name: title,
 		end: size.value,
-		duration: mounted ? 0 : 1,
+		duration: isMounted ? 0 : 1,
 		saveState: false
 	});
 
@@ -100,13 +106,16 @@ const StatItem = (props: StatItemProps) => {
 };
 
 export default () => {
-	const platform = usePlatform();
 	const { library } = useLibraryContext();
 
 	const stats = useLibraryQuery(['library.statistics'], {
 		initialData: { ...EMPTY_STATISTICS }
 	});
-	mounted = true;
+
+	useEffect(() => {
+		if (!stats.isLoading) mounted = true;
+	});
+
 	return (
 		<div className="flex w-full px-5 pb-2 pt-4">
 			{/* STAT CONTAINER */}
diff --git a/interface/app/$libraryId/settings/client/SpacedriveAccount.tsx b/interface/app/$libraryId/settings/client/SpacedriveAccount.tsx
index b1f5e430b..a048b945d 100644
--- a/interface/app/$libraryId/settings/client/SpacedriveAccount.tsx
+++ b/interface/app/$libraryId/settings/client/SpacedriveAccount.tsx
@@ -41,7 +41,10 @@ export function LoginButton({ onLogin }: { onLogin: () => void }) {
 }
 
 export function SpacedriveAccount() {
-	const user = useBridgeQuery(['auth.me']);
+	const user = useBridgeQuery(['auth.me'], {
+		// If the backend returns un unauthorised error we don't want to retry
+		retry: false
+	});
 
 	const logout = useBridgeMutation(['auth.logout']);