From 7a04964fa86efa4dc17d2e5352d37cc6268bae08 Mon Sep 17 00:00:00 2001 From: Curtis Upshall Date: Wed, 22 Nov 2023 16:46:32 -0800 Subject: [PATCH 01/16] Added loading placeholders for observations table headers --- .../observations-table/ObservationsTable.tsx | 324 ++++++++++-------- 1 file changed, 181 insertions(+), 143 deletions(-) diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx index 0c6d62659e..0533eca39b 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx @@ -47,7 +47,7 @@ export interface ISpeciesObservationTableProps { isLoading?: boolean; } -const SampleSiteSkeleton = () => ( +const ObservationSkeletonRow = () => ( ( justifyContent: 'space-between', p: 1.75, height: 60, - background: '#fff', borderBottom: '1px solid ' + grey[300], '& * ': { transform: 'none !important' @@ -67,35 +66,71 @@ const SampleSiteSkeleton = () => ( display: 'flex', gap: '16px', alignItems: 'center', - px: 4, + px: 3, flex: '1' }}> + + - ); -const LoadingOverlay = () => { +const ObservationTableSkeletonLoader = () => { return ( - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); }; @@ -112,6 +147,7 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { const isLoading = useMemo(() => { return [ + // true, observationsContext.observationsDataLoader.isLoading && !observationsContext.observationsDataLoader.hasLoaded, props.isLoading, surveyContext.sampleSiteDataLoader.isLoading, @@ -479,129 +515,131 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { }, [location.hash, observationsTableContext]); return ( - observationsTableContext.onRowEditStart(params.id)} - onRowEditStop={(_params, event) => { - event.defaultMuiPrevented = true; - }} - localeText={{ - noRowsLabel: 'No Records' - }} - onRowSelectionModelChange={observationsTableContext.onRowSelectionModelChange} - rowSelectionModel={observationsTableContext.rowSelectionModel} - getRowHeight={() => 'auto'} - slots={{ - loadingOverlay: LoadingOverlay - }} - sx={{ - background: grey[50], - border: 'none', - '& .pinnedColumn': { - position: 'sticky', - right: 0, - top: 0, - borderLeft: '1px solid' + grey[300] - }, - '& .MuiDataGrid-columnHeaders': { - background: '#fff', - position: 'relative', - '&:after': { - content: "''", - position: 'absolute', - top: '0', - right: 0, - width: '70px', - height: '60px', - background: '#fff', - borderLeft: '1px solid' + grey[300] - } - }, - '& .MuiDataGrid-columnHeader': { - // px: 3, - py: 1, - '&:focus': { - outline: 'none' - } - }, - '& .MuiDataGrid-columnHeaderTitle': { - fontWeight: 700, - textTransform: 'uppercase', - color: 'text.secondary' - }, - '& .MuiDataGrid-cell': { - // px: 3, - py: 1, - background: '#fff', - '&.MuiDataGrid-cell--editing:focus-within': { - outline: 'none' - }, - '&.MuiDataGrid-cell--editing': { - p: 0.5, - backgroundColor: cyan[100] - } - }, - '& .MuiDataGrid-row--editing': { - boxShadow: 'none', - backgroundColor: cyan[50], - '& .MuiDataGrid-cell': { - backgroundColor: cyan[50] - } - }, - '& .MuiDataGrid-editInputCell': { - border: '1px solid #ccc', - '&:hover': { - borderColor: 'primary.main' - }, - '&.Mui-focused': { - borderColor: 'primary.main', - outlineWidth: '2px', - outlineStyle: 'solid', - outlineColor: 'primary.main', - outlineOffset: '-2px' - } - }, - '& .MuiInputBase-root': { - height: '40px', - borderRadius: '4px', - background: '#fff', - fontSize: '0.875rem', - '&.MuiDataGrid-editInputCell': { - padding: 0 - } - }, - '& .MuiOutlinedInput-root': { - borderRadius: '4px', - background: '#fff', - border: 'none', - '&:hover': { - borderColor: 'primary.main' - }, - '&:hover > fieldset': { - border: '1px solid primary.main' - } - }, - '& .MuiOutlinedInput-notchedOutline': { - border: '1px solid ' + grey[300], - '&.Mui-focused': { - borderColor: 'primary.main' - } - }, - '& .MuiDataGrid-virtualScrollerContent': { - background: grey[100] - }, - '& .MuiDataGrid-footerContainer': { - background: '#fff' - } - }} - /> + <> + {isLoading ? ( + + ) : ( + observationsTableContext.onRowEditStart(params.id)} + onRowEditStop={(_params, event) => { + event.defaultMuiPrevented = true; + }} + localeText={{ + noRowsLabel: 'No Records' + }} + onRowSelectionModelChange={observationsTableContext.onRowSelectionModelChange} + rowSelectionModel={observationsTableContext.rowSelectionModel} + getRowHeight={() => 'auto'} + sx={{ + background: grey[50], + border: 'none', + '& .pinnedColumn': { + position: 'sticky', + right: 0, + top: 0, + borderLeft: '1px solid' + grey[300] + }, + '& .MuiDataGrid-columnHeaders': { + background: '#fff', + position: 'relative', + '&:after': { + content: "''", + position: 'absolute', + top: '0', + right: 0, + width: '70px', + height: '60px', + background: '#fff', + borderLeft: '1px solid' + grey[300] + } + }, + '& .MuiDataGrid-columnHeader': { + // px: 3, + py: 1, + '&:focus': { + outline: 'none' + } + }, + '& .MuiDataGrid-columnHeaderTitle': { + fontWeight: 700, + textTransform: 'uppercase', + color: 'text.secondary' + }, + '& .MuiDataGrid-cell': { + // px: 3, + py: 1, + background: '#fff', + '&.MuiDataGrid-cell--editing:focus-within': { + outline: 'none' + }, + '&.MuiDataGrid-cell--editing': { + p: 0.5, + backgroundColor: cyan[100] + } + }, + '& .MuiDataGrid-row--editing': { + boxShadow: 'none', + backgroundColor: cyan[50], + '& .MuiDataGrid-cell': { + backgroundColor: cyan[50] + } + }, + '& .MuiDataGrid-editInputCell': { + border: '1px solid #ccc', + '&:hover': { + borderColor: 'primary.main' + }, + '&.Mui-focused': { + borderColor: 'primary.main', + outlineWidth: '2px', + outlineStyle: 'solid', + outlineColor: 'primary.main', + outlineOffset: '-2px' + } + }, + '& .MuiInputBase-root': { + height: '40px', + borderRadius: '4px', + background: '#fff', + fontSize: '0.875rem', + '&.MuiDataGrid-editInputCell': { + padding: 0 + } + }, + '& .MuiOutlinedInput-root': { + borderRadius: '4px', + background: '#fff', + border: 'none', + '&:hover': { + borderColor: 'primary.main' + }, + '&:hover > fieldset': { + border: '1px solid primary.main' + } + }, + '& .MuiOutlinedInput-notchedOutline': { + border: '1px solid ' + grey[300], + '&.Mui-focused': { + borderColor: 'primary.main' + } + }, + '& .MuiDataGrid-virtualScrollerContent': { + background: grey[100] + }, + '& .MuiDataGrid-footerContainer': { + background: '#fff' + } + }} + /> + )} + ); }; From 008252d81a68a51d102ff93cd90c903d08bcf270 Mon Sep 17 00:00:00 2001 From: jeznorth Date: Thu, 23 Nov 2023 11:19:19 -0800 Subject: [PATCH 02/16] Fixing skeleton loaders --- .../observations-table/ObservationsTable.tsx | 96 +++++-------------- .../sampling-sites/SamplingSiteList.tsx | 12 +-- 2 files changed, 24 insertions(+), 84 deletions(-) diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx index 0533eca39b..79edf8f088 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx @@ -4,6 +4,7 @@ import Box from '@mui/material/Box'; import { cyan, grey } from '@mui/material/colors'; import IconButton from '@mui/material/IconButton'; import Skeleton from '@mui/material/Skeleton'; +import Stack from '@mui/material/Stack'; import { DataGrid, GridColDef } from '@mui/x-data-grid'; import AutocompleteDataGridEditCell from 'components/data-grid/autocomplete/AutocompleteDataGridEditCell'; import AutocompleteDataGridViewCell from 'components/data-grid/autocomplete/AutocompleteDataGridViewCell'; @@ -48,86 +49,33 @@ export interface ISpeciesObservationTableProps { } const ObservationSkeletonRow = () => ( - - - - - - - - - - - + + + + + + + + ); const ObservationTableSkeletonLoader = () => { return ( - - - - - - - - - - - - - - - - - - - - - - - - - - + @@ -291,7 +239,7 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { headerName: 'Sampling Period', editable: true, flex: 0, - width: 240, + width: 250, disableColumnMenu: true, headerAlign: 'left', align: 'left', @@ -516,7 +464,7 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { return ( <> - {isLoading ? ( + {!isLoading ? ( ) : ( ( gap: '16px', py: 1.5, px: 2, - height: '52px', + height: '56px', background: '#fff', borderBottom: '1px solid ' + grey[300] }}> @@ -203,7 +203,7 @@ const SamplingSiteList = () => { {/* Display spinner if data loaders are still waiting for a response */} - + { - - - - - - - - From 5dbb6ec5ee6f40c769ebec3a7a8070ed8240b583 Mon Sep 17 00:00:00 2001 From: jeznorth Date: Thu, 23 Nov 2023 11:37:30 -0800 Subject: [PATCH 03/16] UI Updates --- .../observations-table/ObservationsTable.tsx | 256 +++++++++--------- .../sampling-sites/SamplingSiteList.tsx | 4 +- 2 files changed, 137 insertions(+), 123 deletions(-) diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx index 79edf8f088..5da83c63f2 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx @@ -3,6 +3,7 @@ import Icon from '@mdi/react'; import Box from '@mui/material/Box'; import { cyan, grey } from '@mui/material/colors'; import IconButton from '@mui/material/IconButton'; +import Paper from '@mui/material/Paper'; import Skeleton from '@mui/material/Skeleton'; import Stack from '@mui/material/Stack'; import { DataGrid, GridColDef } from '@mui/x-data-grid'; @@ -57,10 +58,11 @@ const ObservationSkeletonRow = () => ( px: 2, height: 56, overflow: 'hidden', - borderBottom: '1px solid ' + grey[300], + '&:not(:last-of-type)': { + borderBottom: '1px solid ' + grey[300], + }, '& .MuiSkeleton-root:not(:first-child)': { flex: '1 1 auto', - maxWidth: '250px' } }}> @@ -70,15 +72,28 @@ const ObservationSkeletonRow = () => ( + ); const ObservationTableSkeletonLoader = () => { return ( - - - - + + + + + + ); }; @@ -464,129 +479,126 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { return ( <> - {!isLoading ? ( - - ) : ( - observationsTableContext.onRowEditStart(params.id)} - onRowEditStop={(_params, event) => { - event.defaultMuiPrevented = true; - }} - localeText={{ - noRowsLabel: 'No Records' - }} - onRowSelectionModelChange={observationsTableContext.onRowSelectionModelChange} - rowSelectionModel={observationsTableContext.rowSelectionModel} - getRowHeight={() => 'auto'} - sx={{ - background: grey[50], - border: 'none', - '& .pinnedColumn': { - position: 'sticky', + + observationsTableContext.onRowEditStart(params.id)} + onRowEditStop={(_params, event) => { + event.defaultMuiPrevented = true; + }} + localeText={{ + noRowsLabel: 'No Records' + }} + onRowSelectionModelChange={observationsTableContext.onRowSelectionModelChange} + rowSelectionModel={observationsTableContext.rowSelectionModel} + getRowHeight={() => 'auto'} + sx={{ + background: grey[50], + border: 'none', + '& .pinnedColumn': { + position: 'sticky', + right: 0, + top: 0, + borderLeft: '1px solid' + grey[300] + }, + '& .MuiDataGrid-columnHeaders': { + background: '#fff', + position: 'relative', + '&:after': { + content: "''", + position: 'absolute', + top: '0', right: 0, - top: 0, - borderLeft: '1px solid' + grey[300] - }, - '& .MuiDataGrid-columnHeaders': { + width: '70px', + height: '60px', background: '#fff', - position: 'relative', - '&:after': { - content: "''", - position: 'absolute', - top: '0', - right: 0, - width: '70px', - height: '60px', - background: '#fff', - borderLeft: '1px solid' + grey[300] - } - }, - '& .MuiDataGrid-columnHeader': { - // px: 3, - py: 1, - '&:focus': { - outline: 'none' - } - }, - '& .MuiDataGrid-columnHeaderTitle': { - fontWeight: 700, - textTransform: 'uppercase', - color: 'text.secondary' + borderLeft: '1px solid' + grey[300] + } + }, + '& .MuiDataGrid-columnHeader': { + // px: 3, + py: 1, + '&:focus': { + outline: 'none' + } + }, + '& .MuiDataGrid-columnHeaderTitle': { + fontWeight: 700, + textTransform: 'uppercase', + color: 'text.secondary' + }, + '& .MuiDataGrid-cell': { + // px: 3, + py: 1, + background: '#fff', + '&.MuiDataGrid-cell--editing:focus-within': { + outline: 'none' }, + '&.MuiDataGrid-cell--editing': { + p: 0.5, + backgroundColor: cyan[100] + } + }, + '& .MuiDataGrid-row--editing': { + boxShadow: 'none', + backgroundColor: cyan[50], '& .MuiDataGrid-cell': { - // px: 3, - py: 1, - background: '#fff', - '&.MuiDataGrid-cell--editing:focus-within': { - outline: 'none' - }, - '&.MuiDataGrid-cell--editing': { - p: 0.5, - backgroundColor: cyan[100] - } - }, - '& .MuiDataGrid-row--editing': { - boxShadow: 'none', - backgroundColor: cyan[50], - '& .MuiDataGrid-cell': { - backgroundColor: cyan[50] - } - }, - '& .MuiDataGrid-editInputCell': { - border: '1px solid #ccc', - '&:hover': { - borderColor: 'primary.main' - }, - '&.Mui-focused': { - borderColor: 'primary.main', - outlineWidth: '2px', - outlineStyle: 'solid', - outlineColor: 'primary.main', - outlineOffset: '-2px' - } - }, - '& .MuiInputBase-root': { - height: '40px', - borderRadius: '4px', - background: '#fff', - fontSize: '0.875rem', - '&.MuiDataGrid-editInputCell': { - padding: 0 - } - }, - '& .MuiOutlinedInput-root': { - borderRadius: '4px', - background: '#fff', - border: 'none', - '&:hover': { - borderColor: 'primary.main' - }, - '&:hover > fieldset': { - border: '1px solid primary.main' - } - }, - '& .MuiOutlinedInput-notchedOutline': { - border: '1px solid ' + grey[300], - '&.Mui-focused': { - borderColor: 'primary.main' - } + backgroundColor: cyan[50] + } + }, + '& .MuiDataGrid-editInputCell': { + border: '1px solid #ccc', + '&:hover': { + borderColor: 'primary.main' }, - '& .MuiDataGrid-virtualScrollerContent': { - background: grey[100] + '&.Mui-focused': { + borderColor: 'primary.main', + outlineWidth: '2px', + outlineStyle: 'solid', + outlineColor: 'primary.main', + outlineOffset: '-2px' + } + }, + '& .MuiInputBase-root': { + height: '40px', + borderRadius: '4px', + background: '#fff', + fontSize: '0.875rem', + '&.MuiDataGrid-editInputCell': { + padding: 0 + } + }, + '& .MuiOutlinedInput-root': { + borderRadius: '4px', + background: '#fff', + border: 'none', + '&:hover': { + borderColor: 'primary.main' }, - '& .MuiDataGrid-footerContainer': { - background: '#fff' + '&:hover > fieldset': { + border: '1px solid primary.main' + } + }, + '& .MuiOutlinedInput-notchedOutline': { + border: '1px solid ' + grey[300], + '&.Mui-focused': { + borderColor: 'primary.main' } - }} - /> - )} + }, + '& .MuiDataGrid-virtualScrollerContent': { + background: grey[100] + }, + '& .MuiDataGrid-footerContainer': { + background: '#fff' + } + }} + /> ); }; diff --git a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx index 811f7383d0..ac609f9b82 100644 --- a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx +++ b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx @@ -42,7 +42,9 @@ const SampleSiteSkeleton = () => ( px: 2, height: '56px', background: '#fff', - borderBottom: '1px solid ' + grey[300] + '&:not(:last-of-type)': { + borderBottom: '1px solid ' + grey[300], + }, }}> From 0e21943d1a45e91ec880e086b434340576eef6c6 Mon Sep 17 00:00:00 2001 From: jeznorth Date: Thu, 23 Nov 2023 11:40:58 -0800 Subject: [PATCH 04/16] Fixing Observation Table Menu Button Position --- .../observations/observations-table/ObservationComponent.tsx | 2 +- .../observations/observations-table/ObservationsTable.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx b/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx index f3e49664fd..7ba1f6321b 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx @@ -157,7 +157,7 @@ const ObservationComponent = () => { onClick={(event: React.MouseEvent) => { setMenuAnchorEl(event.currentTarget); }} - size="small" + edge="end" disabled={numSelectedRows === 0} aria-label="observation options"> diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx index 5da83c63f2..a6c7b1e6e1 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx @@ -61,7 +61,7 @@ const ObservationSkeletonRow = () => ( '&:not(:last-of-type)': { borderBottom: '1px solid ' + grey[300], }, - '& .MuiSkeleton-root:not(:first-child)': { + '& .MuiSkeleton-root:not(:first-of-type)': { flex: '1 1 auto', } }}> From 281922205dbc87fea6a1cd032cd612aabb0380a7 Mon Sep 17 00:00:00 2001 From: jeznorth Date: Thu, 23 Nov 2023 11:42:22 -0800 Subject: [PATCH 05/16] Removing Dev Code --- .../surveys/observations/sampling-sites/SamplingSiteList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx index ac609f9b82..fa6da8ec8b 100644 --- a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx +++ b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx @@ -205,7 +205,7 @@ const SamplingSiteList = () => { {/* Display spinner if data loaders are still waiting for a response */} - + Date: Fri, 24 Nov 2023 08:53:32 -0800 Subject: [PATCH 06/16] Standardize Loading Patterns, General UI Improvements --- .../surveys/observations/ObservationsMap.tsx | 8 +- .../observations-table/ObservationsTable.tsx | 6 +- .../sampling-sites/SamplingSiteList.tsx | 257 +++++++++--------- app/src/features/surveys/view/SurveyPage.tsx | 33 ++- 4 files changed, 161 insertions(+), 143 deletions(-) diff --git a/app/src/features/surveys/observations/ObservationsMap.tsx b/app/src/features/surveys/observations/ObservationsMap.tsx index 980f6023fe..86100986ee 100644 --- a/app/src/features/surveys/observations/ObservationsMap.tsx +++ b/app/src/features/surveys/observations/ObservationsMap.tsx @@ -109,14 +109,14 @@ const ObservationsMap = () => { ]); return ( - + <> + style={{ height: '100%' }}> @@ -150,7 +150,7 @@ const ObservationsMap = () => { {(surveyObservations.length > 0 || studyAreaFeatures.length > 0 || sampleSiteFeatures.length > 0) && ( - + { )} - + ); }; diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx index a6c7b1e6e1..8e9a786cd0 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx @@ -479,7 +479,11 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { return ( <> - + + + + + { - {/* Display spinner if data loaders are still waiting for a response */} - + + {/* Display skeleton loaders if data loaders are still waiting for a response */} + {surveyContext.sampleSiteDataLoader.isLoading || codesContext.codesDataLoader.isLoading ? ( { - + ) : ( + - - {/* Display text if the sample site data loader has no items in it */} - {!surveyContext.sampleSiteDataLoader.data?.sampleSites.length && - !surveyContext.sampleSiteDataLoader.isLoading && ( - - No Sampling Sites - - )} + {/* Display text if the sample site data loader has no items in it */} + {!surveyContext.sampleSiteDataLoader.data?.sampleSites.length && + !surveyContext.sampleSiteDataLoader.isLoading && ( + + No Sampling Sites + + )} - {surveyContext.sampleSiteDataLoader.data?.sampleSites.map((sampleSite, index) => { - return ( - - - } - aria-controls="panel1bh-content" - sx={{ - flex: '1 1 auto', - overflow: 'hidden', - py: 0.25, - pr: 1.5, - pl: 2, - gap: '24px', - '& .MuiAccordionSummary-content': { + {surveyContext.sampleSiteDataLoader.data?.sampleSites.map((sampleSite, index) => { + return ( + + + } + aria-controls="panel1bh-content" + sx={{ flex: '1 1 auto', overflow: 'hidden', - whiteSpace: 'nowrap' + py: 0.25, + pr: 1.5, + pl: 2, + gap: '24px', + '& .MuiAccordionSummary-content': { + flex: '1 1 auto', + overflow: 'hidden', + whiteSpace: 'nowrap' + } + }}> + + {sampleSite.name} + + + ) => + handleMenuClick(event, sampleSite.survey_sample_site_id) } + aria-label="settings"> + + + + - - {sampleSite.name} - - - ) => - handleMenuClick(event, sampleSite.survey_sample_site_id) - } - aria-label="settings"> - - - - - - {sampleSite.sample_methods?.map((sampleMethod) => { - return ( - - - - {sampleMethod.sample_periods?.map((samplePeriod) => { - return ( - - - - - - - {`${samplePeriod.start_date} ${samplePeriod.start_time || ''} - ${ - samplePeriod.end_date - } ${samplePeriod.end_time || ''}`} - - - - ); - })} - - - ); - })} - - - - ); - })} - + {sampleSite.sample_methods?.map((sampleMethod) => { + return ( + + + + {sampleMethod.sample_periods?.map((samplePeriod) => { + return ( + + + + + + + {`${samplePeriod.start_date} ${samplePeriod.start_time || ''} - ${samplePeriod.end_date + } ${samplePeriod.end_time || ''}`} + + + + ); + })} + + + ); + })} + + + + ); + })} + + )} + diff --git a/app/src/features/surveys/view/SurveyPage.tsx b/app/src/features/surveys/view/SurveyPage.tsx index 6548acf184..e4f5f3db49 100644 --- a/app/src/features/surveys/view/SurveyPage.tsx +++ b/app/src/features/surveys/view/SurveyPage.tsx @@ -1,11 +1,9 @@ import { mdiPencilOutline } from '@mdi/js'; import Icon from '@mdi/react'; -import { LinearProgress } from '@mui/material'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; import Container from '@mui/material/Container'; -import Fade from '@mui/material/Fade'; import Paper from '@mui/material/Paper'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; @@ -24,6 +22,7 @@ import SurveySummaryResults from './summary-results/SurveySummaryResults'; import SurveyAnimals from './SurveyAnimals'; import SurveyAttachments from './SurveyAttachments'; import SurveyHeader from './SurveyHeader'; +import Skeleton from '@mui/material/Skeleton'; //TODO: PRODUCTION_BANDAGE: Remove @@ -57,7 +56,7 @@ const SurveyPage: React.FC = () => { - + { flex: '1 1 auto' }}> Observations ‌ - - ({numObservations}) - + {!numObservations ? ( + ' ' + ) : ( + + ({numObservations}) + + )} - - - - + + {observationsContext.observationsDataLoader.isLoading && ( + + )} + + From db377e613c604c953c6ed8f58e39d1c0c5ec24bc Mon Sep 17 00:00:00 2001 From: jeznorth Date: Fri, 24 Nov 2023 09:22:59 -0800 Subject: [PATCH 07/16] Map Loading Overlay --- .../observations-table/ObservationsTable.tsx | 4 +- .../sampling-sites/SamplingSiteList.tsx | 263 +++++++++--------- app/src/features/surveys/view/SurveyPage.tsx | 29 +- 3 files changed, 152 insertions(+), 144 deletions(-) diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx index 8e9a786cd0..9b61c2fa41 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx @@ -480,9 +480,7 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { return ( <> - - - + { - {/* Display spinner if data loaders are still waiting for a response */} - + + {surveyContext.sampleSiteDataLoader.isLoading || codesContext.codesDataLoader.isLoading ? ( { - - - - - - - - - - - - {/* Display text if the sample site data loader has no items in it */} - {!surveyContext.sampleSiteDataLoader.data?.sampleSites.length && - !surveyContext.sampleSiteDataLoader.isLoading && ( - - No Sampling Sites - - )} + ) : ( + + {/* Display text if the sample site data loader has no items in it */} + {!surveyContext.sampleSiteDataLoader.data?.sampleSites.length && + !surveyContext.sampleSiteDataLoader.isLoading && ( + + No Sampling Sites + + )} - {surveyContext.sampleSiteDataLoader.data?.sampleSites.map((sampleSite, index) => { - return ( - - - } - aria-controls="panel1bh-content" - sx={{ - flex: '1 1 auto', - overflow: 'hidden', - py: 0.25, - pr: 1.5, - pl: 2, - gap: '24px', - '& .MuiAccordionSummary-content': { + {surveyContext.sampleSiteDataLoader.data?.sampleSites.map((sampleSite, index) => { + return ( + + + } + aria-controls="panel1bh-content" + sx={{ flex: '1 1 auto', overflow: 'hidden', - whiteSpace: 'nowrap' + py: 0.25, + pr: 1.5, + pl: 2, + gap: '24px', + '& .MuiAccordionSummary-content': { + flex: '1 1 auto', + overflow: 'hidden', + whiteSpace: 'nowrap' + } + }}> + + {sampleSite.name} + + + ) => + handleMenuClick(event, sampleSite.survey_sample_site_id) } + aria-label="settings"> + + + + - - {sampleSite.name} - - - ) => - handleMenuClick(event, sampleSite.survey_sample_site_id) - } - aria-label="settings"> - - - - - - {sampleSite.sample_methods?.map((sampleMethod) => { - return ( - - - - {sampleMethod.sample_periods?.map((samplePeriod) => { - return ( - - - - - - - {`${samplePeriod.start_date} ${samplePeriod.start_time || ''} - ${ - samplePeriod.end_date - } ${samplePeriod.end_time || ''}`} - - - - ); - })} - - - ); - })} - - - - ); - })} - + {sampleSite.sample_methods?.map((sampleMethod) => { + return ( + + + + {sampleMethod.sample_periods?.map((samplePeriod) => { + return ( + + + + + + + {`${samplePeriod.start_date} ${samplePeriod.start_time || ''} - ${samplePeriod.end_date + } ${samplePeriod.end_time || ''}`} + + + + ); + })} + + + ); + })} + + + + ); + })} + + )} + diff --git a/app/src/features/surveys/view/SurveyPage.tsx b/app/src/features/surveys/view/SurveyPage.tsx index e4f5f3db49..8a99e35933 100644 --- a/app/src/features/surveys/view/SurveyPage.tsx +++ b/app/src/features/surveys/view/SurveyPage.tsx @@ -1,4 +1,4 @@ -import { mdiPencilOutline } from '@mdi/js'; +import { mdiMapSearchOutline, mdiPencilOutline } from '@mdi/js'; import Icon from '@mdi/react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; @@ -23,6 +23,7 @@ import SurveyAnimals from './SurveyAnimals'; import SurveyAttachments from './SurveyAttachments'; import SurveyHeader from './SurveyHeader'; import Skeleton from '@mui/material/Skeleton'; +import grey from '@mui/material/colors/grey'; //TODO: PRODUCTION_BANDAGE: Remove @@ -84,15 +85,33 @@ const SurveyPage: React.FC = () => { {observationsContext.observationsDataLoader.isLoading && ( - + left: 0, + zIndex: 1002, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + background: '#fff', + '& svg': { + color: grey[300] + } + }}> + + + )} From 36fcc070c44f5a642ec3c88359626644a38fec0d Mon Sep 17 00:00:00 2001 From: jeznorth Date: Mon, 27 Nov 2023 09:06:21 -0800 Subject: [PATCH 08/16] Fixing height of sampling site list skeleton --- app/src/features/surveys/observations/ObservationsMap.tsx | 2 +- .../observations/sampling-sites/SamplingSiteList.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/src/features/surveys/observations/ObservationsMap.tsx b/app/src/features/surveys/observations/ObservationsMap.tsx index 86100986ee..2d34fb104e 100644 --- a/app/src/features/surveys/observations/ObservationsMap.tsx +++ b/app/src/features/surveys/observations/ObservationsMap.tsx @@ -150,7 +150,7 @@ const ObservationsMap = () => { {(surveyObservations.length > 0 || studyAreaFeatures.length > 0 || sampleSiteFeatures.length > 0) && ( - + ( gap: '16px', py: 1.5, px: 2, - height: '52px', + height: '56px', background: '#fff', - borderBottom: '1px solid ' + grey[300] + '&:not(:last-of-type)': { + borderBottom: '1px solid ' + grey[300] + } }}> From 69e44f3de6032f1977f71976667799f0b0b00c33 Mon Sep 17 00:00:00 2001 From: jeznorth Date: Mon, 27 Nov 2023 09:17:49 -0800 Subject: [PATCH 09/16] Fix button clipping --- .../observations/observations-table/ObservationComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx b/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx index 7ba1f6321b..57e73400f1 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx @@ -117,7 +117,7 @@ const ObservationComponent = () => { - + - - setHideAlert(true)}> - - - - }> - Could not save observations: Validation failed - - Error {indexIndicator} - {currentError && `: ${currentError.message}`} - - - + + + + setHideAlert(true)} sx={{ml: 2}}> + + + + }> + Missing required fields + + Error {indexIndicator} + {currentError && `: ${currentError.message}`} + + ); }; diff --git a/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx b/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx index a6b4571569..00cd67beba 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx @@ -2,14 +2,13 @@ import { mdiDotsVertical, mdiImport, mdiPlus, mdiTrashCanOutline } from '@mdi/js import Icon from '@mdi/react'; import { LoadingButton } from '@mui/lab'; import { ListItemIcon } from '@mui/material'; +import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Collapse from '@mui/material/Collapse'; -import { grey } from '@mui/material/colors'; import IconButton from '@mui/material/IconButton'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; -import Paper from '@mui/material/Paper'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import DataGridValidationAlert from 'components/data-grid/DataGridValidationAlert'; @@ -105,111 +104,108 @@ const ObservationComponent = () => { height="100%" sx={{ overflow: 'hidden', - background: grey[100] }}> - - - - Observations ‌ - - ({observationsTableContext.observationCount}) - + + + + Observations ‌ + + ({observationsTableContext.observationCount}) + - - - - - - observationsTableContext.saveObservationRecords()} - disabled={observationsTableContext.isSaving}> - Save - - - - - - ) => { - setMenuAnchorEl(event.currentTarget); - }} - edge="end" - disabled={numSelectedRows === 0} - aria-label="observation options"> - - - + + + + + observationsTableContext.saveObservationRecords()} + disabled={observationsTableContext.isSaving}> + Save + + + + + + ) => { + setMenuAnchorEl(event.currentTarget); }} - id="survey-observations-table-actions-menu" - anchorEl={menuAnchorEl} - open={Boolean(menuAnchorEl)} - onClose={handleCloseMenu} - MenuListProps={{ - 'aria-labelledby': 'basic-button' - }}> + edge="end" + disabled={numSelectedRows === 0} + aria-label="observation options"> + + + - { - observationsTableContext.deleteSelectedObservationRecords(); - handleCloseMenu(); - }} - disabled={observationsTableContext.isSaving}> - - - - Delete {p(numSelectedRows, 'Observation')} - - - + { + observationsTableContext.deleteSelectedObservationRecords(); + handleCloseMenu(); + }} + disabled={observationsTableContext.isSaving}> + + + + Delete {p(numSelectedRows, 'Observation')} + + - - + + + + - + position="relative"> + diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx index f60ba4810f..61e6150ced 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx @@ -90,7 +90,7 @@ const ObservationTableSkeletonLoader = () => { left: 0, zIndex: '999', p: 1, - background: grey[100] + background: '#fff' }}> @@ -595,8 +595,10 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { getRowHeight={() => 'auto'} getRowClassName={(params) => has(observationsTableContext.validationModel, params.row.id) ? 'error' : ''} sx={{ - background: grey[50], + background: '#fff', border: 'none', + borderTop: '1px solid ' + grey[300], + borderRadius: 0, '&:after': { content: '" "', position: 'absolute', @@ -613,7 +615,6 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { borderLeft: '1px solid' + grey[300] }, '& .MuiDataGrid-columnHeaders': { - background: '#fff', position: 'relative' }, '& .MuiDataGrid-columnHeader:focus-within': { @@ -633,14 +634,20 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { }, '&.MuiDataGrid-cell--editing': { p: 0.5, - backgroundColor: cyan[100] + backgroundColor: cyan[100], } + }, '& .MuiDataGrid-row--editing': { boxShadow: 'none', backgroundColor: cyan[50], '& .MuiDataGrid-cell': { backgroundColor: cyan[50] + }, + '&.error': { + '& .MuiDataGrid-cell, .MuiDataGrid-cell--editing': { + backgroundColor: 'rgb(251, 237, 238)' + } } }, '& .MuiDataGrid-editInputCell': { @@ -683,7 +690,7 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { } }, '& .MuiDataGrid-virtualScrollerContent': { - background: grey[100] + background: '#fff' }, '& .MuiDataGrid-footerContainer': { background: '#fff' diff --git a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx index ba4b02a941..2daa22c53e 100644 --- a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx +++ b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx @@ -41,9 +41,7 @@ const SampleSiteSkeleton = () => ( px: 2, height: '56px', background: '#fff', - '&:not(:last-of-type)': { - borderBottom: '1px solid ' + grey[300] - } + borderTop: '1px solid ' + grey[300] }}> @@ -211,7 +209,8 @@ const SamplingSiteList = () => { width: '100%', height: '100%', p: 1, - background: grey[100], + pt: 0, + background: '#fff', zIndex: 2 }}> @@ -228,7 +227,7 @@ const SamplingSiteList = () => { height: '100%', overflowY: 'auto', p: 1, - background: grey[100] + pt: 0 }}> {/* Display text if the sample site data loader has no items in it */} {!surveyContext.sampleSiteDataLoader.data?.sampleSites.length && @@ -241,9 +240,15 @@ const SamplingSiteList = () => { {surveyContext.sampleSiteDataLoader.data?.sampleSites.map((sampleSite, index) => { return ( Date: Tue, 28 Nov 2023 12:07:54 -0800 Subject: [PATCH 14/16] Adding Title for Sampling Method and Period --- .../surveys/observations/sampling-sites/SamplingSiteList.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx index 2daa22c53e..39d79c83a3 100644 --- a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx +++ b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx @@ -316,6 +316,7 @@ const SamplingSiteList = () => { } }}> { px: 1.5, color: 'text.secondary' }} + title="Sampling Period" key={`${samplePeriod.survey_sample_method_id}-${samplePeriod.survey_sample_period_id}`}> From 77cd1c640726f15911d9b658597c9771004e2333 Mon Sep 17 00:00:00 2001 From: jeznorth Date: Tue, 28 Nov 2023 12:15:52 -0800 Subject: [PATCH 15/16] Fix Sample Site List Styling --- .../observations/sampling-sites/SamplingSiteList.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx index 39d79c83a3..0793e79ceb 100644 --- a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx +++ b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx @@ -294,7 +294,8 @@ const SamplingSiteList = () => { { key={`${sampleMethod.survey_sample_site_id}-${sampleMethod.survey_sample_method_id}`} sx={{ display: 'block', - py: 0, + p: 0, '& + li': { mt: 1.5 } }}> Date: Mon, 4 Dec 2023 15:08:16 -0800 Subject: [PATCH 16/16] Fixed linting errors --- .../data-grid/DataGridValidationAlert.tsx | 12 ++-- .../ObservationComponent.tsx | 63 +++++++++---------- .../observations-table/ObservationsTable.tsx | 17 +++-- .../sampling-sites/SamplingSiteList.tsx | 7 +-- app/src/features/surveys/view/SurveyPage.tsx | 13 ++-- 5 files changed, 53 insertions(+), 59 deletions(-) diff --git a/app/src/components/data-grid/DataGridValidationAlert.tsx b/app/src/components/data-grid/DataGridValidationAlert.tsx index 066699e26b..219043adad 100644 --- a/app/src/components/data-grid/DataGridValidationAlert.tsx +++ b/app/src/components/data-grid/DataGridValidationAlert.tsx @@ -128,23 +128,25 @@ const DataGridValidationAlert = >(props: IDataG sx={{ mx: 1, mb: 1, - py: 1.5, + py: 1.5 }} action={ - + }}> - setHideAlert(true)} sx={{ml: 2}}> + setHideAlert(true)} sx={{ ml: 2 }}> diff --git a/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx b/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx index 00cd67beba..4fb126f24a 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationComponent.tsx @@ -2,13 +2,13 @@ import { mdiDotsVertical, mdiImport, mdiPlus, mdiTrashCanOutline } from '@mdi/js import Icon from '@mdi/react'; import { LoadingButton } from '@mui/lab'; import { ListItemIcon } from '@mui/material'; -import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Collapse from '@mui/material/Collapse'; import IconButton from '@mui/material/IconButton'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; +import Stack from '@mui/material/Stack'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import DataGridValidationAlert from 'components/data-grid/DataGridValidationAlert'; @@ -103,9 +103,8 @@ const ObservationComponent = () => { flex="1 1 auto" height="100%" sx={{ - overflow: 'hidden', + overflow: 'hidden' }}> - { - - - { - observationsTableContext.deleteSelectedObservationRecords(); - handleCloseMenu(); + anchorOrigin={{ + vertical: 'top', + horizontal: 'right' + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'right' }} - disabled={observationsTableContext.isSaving}> - - - - Delete {p(numSelectedRows, 'Observation')} - + id="survey-observations-table-actions-menu" + anchorEl={menuAnchorEl} + open={Boolean(menuAnchorEl)} + onClose={handleCloseMenu} + MenuListProps={{ + 'aria-labelledby': 'basic-button' + }}> + { + observationsTableContext.deleteSelectedObservationRecords(); + handleCloseMenu(); + }} + disabled={observationsTableContext.isSaving}> + + + + Delete {p(numSelectedRows, 'Observation')} + @@ -200,11 +197,7 @@ const ObservationComponent = () => { - + diff --git a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx index 61e6150ced..feebe25868 100644 --- a/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx +++ b/app/src/features/surveys/observations/observations-table/ObservationsTable.tsx @@ -62,13 +62,13 @@ const ObservationSkeletonRow = () => ( height: 56, overflow: 'hidden', '&:not(:last-of-type)': { - borderBottom: '1px solid ' + grey[300], + borderBottom: '1px solid ' + grey[300] }, '& .MuiSkeleton-root:not(:first-of-type)': { - flex: '1 1 auto', + flex: '1 1 auto' } }}> - + @@ -81,7 +81,7 @@ const ObservationSkeletonRow = () => ( const ObservationTableSkeletonLoader = () => { return ( - { return ( <> - {isLoading && ( - - )} + {isLoading && } { onRowSelectionModelChange={observationsTableContext.onRowSelectionModelChange} rowSelectionModel={observationsTableContext.rowSelectionModel} getRowHeight={() => 'auto'} - getRowClassName={(params) => has(observationsTableContext.validationModel, params.row.id) ? 'error' : ''} + getRowClassName={(params) => (has(observationsTableContext.validationModel, params.row.id) ? 'error' : '')} sx={{ background: '#fff', border: 'none', @@ -634,9 +632,8 @@ const ObservationsTable = (props: ISpeciesObservationTableProps) => { }, '&.MuiDataGrid-cell--editing': { p: 0.5, - backgroundColor: cyan[100], + backgroundColor: cyan[100] } - }, '& .MuiDataGrid-row--editing': { boxShadow: 'none', diff --git a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx index 0793e79ceb..6b2d20ea20 100644 --- a/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx +++ b/app/src/features/surveys/observations/sampling-sites/SamplingSiteList.tsx @@ -201,7 +201,6 @@ const SamplingSiteList = () => { - {surveyContext.sampleSiteDataLoader.isLoading || codesContext.codesDataLoader.isLoading ? ( { - {`${samplePeriod.start_date} ${samplePeriod.start_time || ''} - ${samplePeriod.end_date - } ${samplePeriod.end_time || ''}`} + {`${samplePeriod.start_date} ${samplePeriod.start_time || ''} - ${ + samplePeriod.end_date + } ${samplePeriod.end_time || ''}`} @@ -364,7 +364,6 @@ const SamplingSiteList = () => { })} )} - diff --git a/app/src/features/surveys/view/SurveyPage.tsx b/app/src/features/surveys/view/SurveyPage.tsx index 8a99e35933..b3a66e6b1f 100644 --- a/app/src/features/surveys/view/SurveyPage.tsx +++ b/app/src/features/surveys/view/SurveyPage.tsx @@ -3,8 +3,10 @@ import Icon from '@mdi/react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; +import grey from '@mui/material/colors/grey'; import Container from '@mui/material/Container'; import Paper from '@mui/material/Paper'; +import Skeleton from '@mui/material/Skeleton'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import SurveySubmissionAlertBar from 'components/publish/SurveySubmissionAlertBar'; @@ -22,8 +24,6 @@ import SurveySummaryResults from './summary-results/SurveySummaryResults'; import SurveyAnimals from './SurveyAnimals'; import SurveyAttachments from './SurveyAttachments'; import SurveyHeader from './SurveyHeader'; -import Skeleton from '@mui/material/Skeleton'; -import grey from '@mui/material/colors/grey'; //TODO: PRODUCTION_BANDAGE: Remove @@ -83,9 +83,9 @@ const SurveyPage: React.FC = () => { Manage Observations - + {observationsContext.observationsDataLoader.isLoading && ( - { color: grey[300] } }}> -