Load selecting table data only when in editing mode

frontend/src/components/DetailView/StagingView.tsx

@@ -4,13 +4,12 @@ import { SelectingTable } from './common/SelectingTable'
 import { useGetAllReferencesQuery } from '@/redux/referenceReducer'
 import { referenceTableColumns } from '@/common'
 import { MRT_RowData } from 'material-react-table'
-import { CircularProgress } from '@mui/material'
 import { Editable, Reference } from '@/backendTypes'
 import { EditableTable } from './common/EditableTable'
 
 export const StagingView = <T extends MRT_RowData>() => {
   const { bigTextField } = useDetailContext<T>()
-  const { data } = useGetAllReferencesQuery()
+  const { data, isError } = useGetAllReferencesQuery()
 
   const editInfoArray = [
     ['Date', new Date().toLocaleDateString('en-CA')],
@@ -23,17 +22,14 @@ export const StagingView = <T extends MRT_RowData>() => {
     <>
       <ArrayFrame array={editInfoArray} title="Reference for the new data" />
       <Grouped title="Reference">
-        {data ? (
-          <SelectingTable<Reference, T>
-            buttonText="Add existing reference"
-            data={data}
-            columns={referenceTableColumns}
-            idFieldName="rid"
-            fieldName="references"
-          />
-        ) : (
-          <CircularProgress />
-        )}
+        <SelectingTable<Reference, T>
+          buttonText="Add existing reference"
+          data={data}
+          isError={isError}
+          columns={referenceTableColumns}
+          idFieldName="rid"
+          fieldName="references"
+        />
         <EditableTable<Editable<Reference>, T> columns={referenceTableColumns} field="references" />
       </Grouped>
     </>

frontend/src/components/DetailView/common/SelectingTable.tsx

@@ -3,7 +3,7 @@ import { EditingModal } from './EditingModal'
 import { TableView } from '@/components/TableView/TableView'
 import { useDetailContext } from '../Context/DetailContext'
 import { useMemo } from 'react'
-import { CircularProgress } from '@mui/material'
+import { Box, CircularProgress } from '@mui/material'
 import { EditDataType } from '@/backendTypes'
 
 /*
@@ -19,6 +19,7 @@ export const SelectingTable = <T extends MRT_RowData, ParentType extends object>
   fieldName,
   idFieldName,
   selectedValues,
+  isError,
 }: {
   buttonText: string
   data: T[] | undefined
@@ -27,9 +28,9 @@ export const SelectingTable = <T extends MRT_RowData, ParentType extends object>
   fieldName: keyof ParentType
   idFieldName: keyof T
   selectedValues?: string[]
+  isError: boolean
 }) => {
   const { editData, setEditData } = useDetailContext<ParentType>()
-
   const selectedItems = editData[fieldName as keyof EditDataType<ParentType>] as T[]
 
   const defaultEditingAction = (newObject: T) => {
@@ -49,6 +50,8 @@ export const SelectingTable = <T extends MRT_RowData, ParentType extends object>
     })
   }, [data, idSet, idFieldName, selectedValues])
 
+  if (isError) return <Box>Error fetching data for the selecting table.</Box>
+  if (!data) return <CircularProgress />
   return (
     <EditingModal buttonText={buttonText}>
       {data ? (

frontend/src/components/Locality/Tabs/LithologyTab.tsx

@@ -5,11 +5,14 @@ import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
 import { ArrayFrame, HalfFrames, Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
 import { useGetAllSedimentaryStructuresQuery } from '@/redux/sedimentaryStructureReducer'
+import { skipToken } from '@reduxjs/toolkit/query'
 import { MRT_ColumnDef } from 'material-react-table'
 
 export const LithologyTab = () => {
-  const { textField, dropdown, setEditData, bigTextField } = useDetailContext<LocalityDetailsType>()
-  const { data: sedimentaryStructuresData } = useGetAllSedimentaryStructuresQuery()
+  const { mode, textField, dropdown, editData, setEditData, bigTextField } = useDetailContext<LocalityDetailsType>()
+  const { data: sedimentaryStructuresData, isError } = useGetAllSedimentaryStructuresQuery(
+    mode.read ? skipToken : undefined
+  )
 
   const rockTypeOptions = [
     emptyOption,
@@ -160,8 +163,6 @@ export const LithologyTab = () => {
     ['Comments', bigTextField('depo_comm')],
   ]
 
-  const { editData, mode } = useDetailContext<LocalityDetailsType>()
-
   const columns: MRT_ColumnDef<SedimentaryStructure>[] = [
     {
       accessorKey: 'sed_struct',
@@ -188,6 +189,7 @@ export const LithologyTab = () => {
             <>
               <SelectingTable<SedimentaryStructureValues, LocalityDetailsType>
                 buttonText="Select Sedimentary structure"
+                isError={isError}
                 columns={selectingTableColumns}
                 data={sedimentaryStructuresData}
                 fieldName="now_ss"

frontend/src/components/Locality/Tabs/MuseumTab.tsx

@@ -5,15 +5,13 @@ import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
 import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
 import { useGetAllMuseumsQuery } from '@/redux/museumReducer'
-import { Box, CircularProgress } from '@mui/material'
+import { Box } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'
+import { skipToken } from '@reduxjs/toolkit/query'
 
 export const MuseumTab = () => {
   const { mode, editData, setEditData } = useDetailContext<LocalityDetailsType>()
-  const { data: museumData, isError } = useGetAllMuseumsQuery()
-
-  if (isError) return 'Error loading museums.'
-  if (!museumData) return <CircularProgress />
+  const { data: museumData, isError } = useGetAllMuseumsQuery(mode.read ? skipToken : undefined)
 
   const columns: MRT_ColumnDef<Museum>[] = [
     {
@@ -64,6 +62,7 @@ export const MuseumTab = () => {
           <SelectingTable<Museum, LocalityDetailsType>
             buttonText="Select Museum"
             data={museumData}
+            isError={isError}
             columns={columns}
             fieldName="now_mus"
             idFieldName="museum"

frontend/src/components/Locality/Tabs/ProjectTab.tsx

@@ -1,19 +1,16 @@
 import { Editable, LocalityDetailsType, Project } from '@/backendTypes'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
-// import { EditingForm } from '@/components/DetailView/common/EditingForm'
 import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
 import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
 import { useGetAllProjectsQuery } from '@/redux/projectReducer'
-import { Box, CircularProgress } from '@mui/material'
+import { Box } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'
+import { skipToken } from '@reduxjs/toolkit/query'
 
 export const ProjectTab = () => {
   const { mode, editData, setEditData } = useDetailContext<LocalityDetailsType>()
-  const { data: projectData, isError } = useGetAllProjectsQuery()
-
-  if (isError) return 'Error loading Projects.'
-  if (!projectData) return <CircularProgress />
+  const { data: projectData, isError } = useGetAllProjectsQuery(mode.read ? skipToken : undefined)
 
   const columns: MRT_ColumnDef<Project>[] = [
     {
@@ -32,6 +29,7 @@ export const ProjectTab = () => {
       accessorKey: 'proj_status',
       header: 'Status',
     },
+    // TODO
     /* {
       accessorFn: ({ proj_records }) => (proj_records ? 'Public' : 'Private'),
       header: 'Records',
@@ -46,6 +44,7 @@ export const ProjectTab = () => {
             buttonText="Select Project"
             data={projectData}
             columns={columns}
+            isError={isError}
             idFieldName="pid"
             fieldName="now_plr"
             editingAction={(newProject: Project) => {

frontend/src/components/Locality/Tabs/SpeciesTab.tsx

@@ -5,15 +5,13 @@ import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
 import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
 import { useGetAllSpeciesQuery } from '@/redux/speciesReducer'
-import { Box, CircularProgress } from '@mui/material'
+import { Box } from '@mui/material'
+import { skipToken } from '@reduxjs/toolkit/query'
 import { MRT_ColumnDef } from 'material-react-table'
 
 export const SpeciesTab = () => {
   const { mode, editData, setEditData } = useDetailContext<LocalityDetailsType>()
-  const { data: speciesData, isError } = useGetAllSpeciesQuery()
-
-  if (isError) return 'Error loading Species.'
-  if (!speciesData) return <CircularProgress />
+  const { data: speciesData, isError } = useGetAllSpeciesQuery(mode.read ? skipToken : undefined)
 
   const columns: MRT_ColumnDef<Species>[] = [
     {
@@ -119,6 +117,7 @@ export const SpeciesTab = () => {
           <SelectingTable<Species, LocalityDetailsType>
             buttonText="Select Species"
             data={speciesData}
+            isError={isError}
             columns={columns}
             fieldName="now_ls"
             idFieldName="species_id"

frontend/src/components/Species/Tabs/LocalityTab.tsx

@@ -3,15 +3,13 @@ import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
 import { useGetAllLocalitiesQuery } from '@/redux/localityReducer'
-import { Box, CircularProgress } from '@mui/material'
+import { Box } from '@mui/material'
 import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
+import { skipToken } from '@reduxjs/toolkit/query'
 
 export const LocalityTab = () => {
-  const { data, editData, setEditData, mode } = useDetailContext<SpeciesDetailsType>()
-  const { data: localitiesData, isError } = useGetAllLocalitiesQuery()
-
-  if (isError) return 'Error loading Localities.'
-  if (!data) return <CircularProgress />
+  const { editData, setEditData, mode } = useDetailContext<SpeciesDetailsType>()
+  const { data: localitiesData, isError } = useGetAllLocalitiesQuery(mode.read ? skipToken : undefined)
 
   const columns = [
     {
@@ -52,6 +50,7 @@ export const LocalityTab = () => {
     <SelectingTable<Editable<Locality>, SpeciesDetailsType>
       buttonText="Select Locality"
       columns={columns}
+      isError={isError}
       data={localitiesData}
       fieldName="now_ls"
       idFieldName="lid"