feat(ui): fixed lagging issues with new dashboard

This commit is contained in:
akhilmhdh
2023-05-04 20:45:26 +05:30
parent 38f578c4ae
commit 82995fbd02
14 changed files with 1009 additions and 1979 deletions
@@ -1,4 +1,3 @@
import { Controller } from 'react-hook-form';
import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -9,36 +8,29 @@ type Props = {
onSort: () => void;
};
export const SecretTableHeader = ({
sortDir,
onSort
}: Props): JSX.Element => (
export const SecretTableHeader = ({ sortDir, onSort }: Props): JSX.Element => (
<thead>
<tr className="absolute flex flex-row sticky top-0">
<td className="w-10 px-4 flex items-center justify-center">
<div className='text-center w-10 text-xs text-transparent'>{0}</div>
<tr className="sticky top-0 flex flex-row">
<td className="flex w-10 items-center justify-center px-4">
<div className="w-10 text-center text-xs text-transparent">{0}</div>
</td>
<Controller
defaultValue=""
name="na"
render={() => (
<td className='flex items-center'>
<div className="min-w-[220px] lg:min-w-[240px] xl:min-w-[280px] relative flex items-center justify-start pl-2.5 w-full">
<div className="inline-flex items-end text-md font-medium">
Key
<IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
<FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
</IconButton>
</div>
<div className="w-max flex flex-row items-center justify-end">
<div className="w-5 overflow-hidden group-hover:w-5 mt-1"/>
</div>
</div>
</td>
)}
/>
<th className="flex flex-row w-full"><div className="text-sm font-medium">Value</div></th>
<td className="flex items-center">
<div className="relative flex w-full min-w-[220px] items-center justify-start pl-2.5 lg:min-w-[240px] xl:min-w-[280px]">
<div className="text-md inline-flex items-end font-medium">
Key
<IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
<FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
</IconButton>
</div>
<div className="flex w-max flex-row items-center justify-end">
<div className="mt-1 w-5 overflow-hidden group-hover:w-5" />
</div>
</div>
</td>
<th className="flex w-full flex-row">
<div className="text-sm font-medium">Value</div>
</th>
</tr>
<tr className='h-0 w-full border border-mineshaft-600'/>
<tr className="h-0 w-full border border-mineshaft-600" />
</thead>
);