fix(ui): worklist had layout shift (#3218)

* fix(ui): worklist had layout shift

* apply review comments
This commit is contained in:
Alireza 2023-03-06 09:47:26 -05:00 committed by GitHub
parent 38d452e17d
commit f14e23cb8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 40 deletions

View File

@ -66,10 +66,7 @@ const StudyListFilter = ({
</div> </div>
</div> </div>
</div> </div>
<div <div className="sticky z-10 border-b-4 border-black -top-1">
className="sticky z-10 border-b-4 border-black"
style={{ top: '52px' }}
>
<div className="pt-3 pb-3 bg-primary-dark "> <div className="pt-3 pb-3 bg-primary-dark ">
<InputGroup <InputGroup
inputMeta={filtersMeta} inputMeta={filtersMeta}

View File

@ -430,48 +430,46 @@ function WorkList({
} }
return ( return (
<div <div className="bg-black h-screen flex flex-col ">
className={classnames('bg-black h-full', {
'h-screen': !hasStudies,
})}
>
<Header <Header
isSticky isSticky
menuOptions={menuOptions} menuOptions={menuOptions}
isReturnEnabled={false} isReturnEnabled={false}
WhiteLabeling={appConfig.whiteLabeling} WhiteLabeling={appConfig.whiteLabeling}
/> />
<StudyListFilter <div className="overflow-y-auto ohif-scrollbar">
numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies} <StudyListFilter
filtersMeta={filtersMeta} numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
filterValues={{ ...filterValues, ...defaultSortValues }} filtersMeta={filtersMeta}
onChange={setFilterValues} filterValues={{ ...filterValues, ...defaultSortValues }}
clearFilters={() => setFilterValues(defaultFilterValues)} onChange={setFilterValues}
isFiltering={isFiltering(filterValues, defaultFilterValues)} clearFilters={() => setFilterValues(defaultFilterValues)}
/> isFiltering={isFiltering(filterValues, defaultFilterValues)}
{hasStudies ? ( />
<> {hasStudies ? (
<StudyListTable <>
tableDataSource={tableDataSource.slice(offset, offsetAndTake)} <StudyListTable
numOfStudies={numOfStudies} tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
filtersMeta={filtersMeta} numOfStudies={numOfStudies}
/> filtersMeta={filtersMeta}
<StudyListPagination />
onChangePage={onPageNumberChange} <StudyListPagination
onChangePerPage={onResultsPerPageChange} onChangePage={onPageNumberChange}
currentPage={pageNumber} onChangePerPage={onResultsPerPageChange}
perPage={resultsPerPage} currentPage={pageNumber}
/> perPage={resultsPerPage}
</> />
) : ( </>
<div className="flex flex-col items-center justify-center pt-48"> ) : (
{appConfig.showLoadingIndicator && isLoadingData ? ( <div className="flex flex-col items-center justify-center pt-48">
<LoadingIndicatorProgress className={'w-full h-full bg-black'} /> {appConfig.showLoadingIndicator && isLoadingData ? (
) : ( <LoadingIndicatorProgress className={'w-full h-full bg-black'} />
<EmptyStudies /> ) : (
)} <EmptyStudies />
</div> )}
)} </div>
)}
</div>
</div> </div>
); );
} }