From 9e77b569628723f71b94ad3ac84226e6f669e0fd Mon Sep 17 00:00:00 2001
From: Oscar Beaumont <oscar@otbeaumont.me>
Date: Tue, 25 Oct 2022 19:16:00 +1000
Subject: [PATCH] fix ENG-226 - App crashing with no libraries

---
 .../src/components/layout/Sidebar.tsx         | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx
index 6223da349..a7c572e5b 100644
--- a/packages/interface/src/components/layout/Sidebar.tsx
+++ b/packages/interface/src/components/layout/Sidebar.tsx
@@ -37,13 +37,12 @@ import { MacTrafficLights } from '../os/TrafficLights';
 import { InputContainer } from '../primitive/InputContainer';
 
 export function Sidebar() {
+	// DO NOT DO LIBRARY QUERIES OR MUTATIONS HERE. This is rendered before a library is set.
 	const os = useOperatingSystem();
 	const { library, libraries, isLoading: isLoadingLibraries, switchLibrary } = useCurrentLibrary();
 	const debugState = useDebugState();
 	const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
 
-	const { data: isRunningJob } = useLibraryQuery(['jobs.isRunning']);
-
 	// const itemStyles = macOnly(os, 'dark:hover:bg-sidebar-box dark:hover:bg-opacity-50');
 	return (
 		<div
@@ -130,11 +129,7 @@ export function Sidebar() {
 								variant="outline"
 								className="radix-state-open:bg-sidebar-selected/50"
 							>
-								{isRunningJob ? (
-									<Loader className="w-[20px] h-[20px]" />
-								) : (
-									<CheckCircle className="w-5 h-5" />
-								)}
+								{library && <IsRunningJob />}
 							</Button>
 						}
 					>
@@ -151,6 +146,16 @@ export function Sidebar() {
 	);
 }
 
+function IsRunningJob() {
+	const { data: isRunningJob } = useLibraryQuery(['jobs.isRunning']);
+
+	return isRunningJob ? (
+		<Loader className="w-[20px] h-[20px]" />
+	) : (
+		<CheckCircle className="w-5 h-5" />
+	);
+}
+
 function DebugPanel() {
 	const buildInfo = useBridgeQuery(['buildInfo']);
 	const nodeState = useBridgeQuery(['nodeState']);