Load main view and detail view in parallel (#521)

* Load main view and detail view in parallel

* Unrelated cleanup

Author: annavik

ui/src/pages/deployment-details/deployment-details-dialog.tsx

@@ -58,13 +58,13 @@ const DeploymentDetailsDialogContent = ({
 }) => {
   const [isEditing, setIsEditing] = useState(false)
   const { updateDeployment, isLoading, error } = useUpdateDeployment(
-    deployment?.id
+    deployment.id
   )
 
   useEffect(() => {
     // Reset to view mode when a new deployment is selected
     setIsEditing(false)
-  }, [deployment?.id])
+  }, [deployment.id])
 
   return (
     <>

ui/src/pages/deployments/deployments.tsx

@@ -42,13 +42,13 @@ export const Deployments = () => {
       </PageHeader>
       <Table
         items={sortedItems}
-        isLoading={isLoading}
+        isLoading={!id && isLoading}
         columns={columns(projectId as string)}
         sortable
         sortSettings={sort}
         onSortSettingsChange={setSort}
       />
-      {!isLoading && id ? <DeploymentDetailsDialog id={id} /> : null}
+      {id ? <DeploymentDetailsDialog id={id} /> : null}
     </>
   )
 }

ui/src/pages/jobs/jobs.tsx

@@ -50,7 +50,7 @@ export const Jobs = () => {
       </PageHeader>
       <Table
         items={jobs}
-        isLoading={isLoading}
+        isLoading={!id && isLoading}
         columns={columns(projectId as string)}
         sortable
         sortSettings={sort}
@@ -65,7 +65,7 @@ export const Jobs = () => {
           />
         ) : null}
       </PageFooter>
-      {!isLoading && id ? <JobDetailsDialog id={id} /> : null}
+      {id ? <JobDetailsDialog id={id} /> : null}
     </>
   )
 }

ui/src/pages/occurrences/occurrences.tsx

@@ -100,7 +100,7 @@ export const Occurrences = () => {
       {selectedView === 'table' && (
         <Table
           items={occurrences}
-          isLoading={isLoading}
+          isLoading={!id && isLoading}
           columns={columns(
             projectId as string,
             selectedItems.length === 0
@@ -115,7 +115,10 @@ export const Occurrences = () => {
       )}
       {selectedView === 'gallery' && (
         <div className={styles.galleryContent}>
-          <OccurrenceGallery occurrences={occurrences} isLoading={isLoading} />
+          <OccurrenceGallery
+            occurrences={occurrences}
+            isLoading={!id && isLoading}
+          />
         </div>
       )}
       <PageFooter>
@@ -141,7 +144,7 @@ export const Occurrences = () => {
           />
         ) : null}
       </PageFooter>
-      {!isLoading && id ? <OccurrenceDetailsDialog id={id} /> : null}
+      {id ? <OccurrenceDetailsDialog id={id} /> : null}
     </>
   )
 }

ui/src/pages/species-details/species-details.tsx

@@ -21,7 +21,7 @@ export const SpeciesDetails = ({ species }: { species: Species }) => {
   const blueprintItems = useMemo(
     () =>
       species.occurrences.length
-        ? species?.occurrences
+        ? species.occurrences
             .map((id) => species.getOccurrenceInfo(id))
             .filter((item): item is BlueprintItem => !!item)
             .map((item) => ({

ui/src/pages/species/species.tsx

@@ -71,7 +71,7 @@ export const Species = () => {
       {selectedView === 'table' && (
         <Table
           items={species}
-          isLoading={isLoading}
+          isLoading={!id && isLoading}
           columns={columns(projectId as string)}
           sortable
           sortSettings={sort}
@@ -80,7 +80,7 @@ export const Species = () => {
       )}
       {selectedView === 'gallery' && (
         <div className={styles.galleryContent}>
-          <SpeciesGallery species={species} isLoading={isLoading} />
+          <SpeciesGallery species={species} isLoading={!id && isLoading} />
         </div>
       )}
       <PageFooter>
@@ -92,7 +92,7 @@ export const Species = () => {
           />
         ) : null}
       </PageFooter>
-      {!isLoading && id ? <SpeciesDetailsDialog id={id} /> : null}
+      {id ? <SpeciesDetailsDialog id={id} /> : null}
     </>
   )
 }