Skip to content

Commit bdbac7f

Browse files
MrFlashAccountMrFlashAccount
committed
Improve perf
1 parent bca2409 commit bdbac7f

19 files changed

+65
-47
lines changed

‎app/gui/src/dashboard/components/AnimatedBackground.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,15 +114,15 @@ AnimatedBackground.Item = memo(function AnimatedBackgroundItem(props: AnimatedBa
114114
const isActive = isSelected ?? activeValue === value
115115

116116
return (
117-
<div className={twJoin('relative *:isolate', className)}>
117+
<div className={twJoin('relative', className)}>
118118
<AnimatedBackgroundItemUnderlay
119119
isActive={isActive}
120120
underlayElement={underlayElement}
121121
layoutId={layoutId}
122122
transition={transition}
123123
/>
124124

125-
{children}
125+
<div className="isolate contents">{children}</div>
126126
</div>
127127
)
128128
})
@@ -157,7 +157,7 @@ const AnimatedBackgroundItemUnderlay = memo(function AnimatedBackgroundItemUnder
157157
<motion.div
158158
layout="position"
159159
layoutId={`background-${layoutId}`}
160-
className="pointer-events-none absolute inset-0"
160+
className="pointer-events-none absolute inset-0 isolate"
161161
transition={transition}
162162
variants={VARIANTS}
163163
initial="hidden"

‎app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,8 @@ export const BUTTON_STYLES = tv({
6868
'group',
6969
// we need to set the height to max-content to prevent the button from growing in flex containers
7070
'h-[max-content]',
71+
72+
'flex-none',
7173
// basic outline
7274
'outline-offset-[1px] outline-transparent',
7375
// buttons always have borders

‎app/gui/src/dashboard/components/Spinner.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
* @file A spinning arc that animates using the `dasharray-<percentage>` custom Tailwind
33
* classes.
44
*/
5-
import { twMerge } from '#/utilities/tailwindMerge'
5+
import * as React from 'react'
6+
import { twJoin } from 'tailwind-merge'
67

78
/** The state of the spinner. It should go from `initial`, to `loading`, to `done`. */
89
export type SpinnerState = 'done' | 'initial' | 'loading-fast' | 'loading-medium' | 'loading-slow'
@@ -27,14 +28,17 @@ export interface SpinnerProps {
2728
}
2829

2930
/** A spinning arc that animates using the `dasharray-<percentage>` custom Tailwind classes. */
30-
export function Spinner(props: SpinnerProps) {
31+
// eslint-disable-next-line no-restricted-syntax
32+
export const Spinner = React.memo(function Spinner(props: SpinnerProps) {
3133
const { size, padding, className, state } = props
3234

35+
const cssClasses = twJoin('pointer-events-none contain-strict', className)
36+
3337
return (
3438
<svg
3539
width={size}
3640
height={size}
37-
className={className}
41+
className={cssClasses}
3842
style={{ padding }}
3943
viewBox="0 0 24 24"
4044
fill="none"
@@ -50,11 +54,11 @@ export function Spinner(props: SpinnerProps) {
5054
stroke="currentColor"
5155
strokeLinecap="round"
5256
strokeWidth={3}
53-
className={twMerge(
57+
className={twJoin(
5458
'pointer-events-none origin-center !animate-spin-ease transition-stroke-dasharray [transition-duration:var(--spinner-slow-transition-duration)]',
5559
SPINNER_CSS_CLASSES[state],
5660
)}
5761
/>
5862
</svg>
5963
)
60-
}
64+
})

‎app/gui/src/dashboard/components/dashboard/AssetRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -692,7 +692,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
692692
}
693693
}}
694694
className={tailwindMerge.twMerge(
695-
'h-table-row rounded-full transition-all ease-in-out contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
695+
'h-table-row rounded-full transition-all ease-in-out rounded-rows-child',
696696
visibility,
697697
(isDraggedOver || selected) && 'selected',
698698
)}

‎app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
4444
return (
4545
<div
4646
className={tailwindMerge.twJoin(
47-
'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
47+
'flex h-table-row w-full min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
4848
indent.indentClass(depth),
4949
)}
5050
onKeyDown={(event) => {

‎app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
6767
return (
6868
<div
6969
className={tailwindMerge.twJoin(
70-
'group flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
70+
'group flex h-table-row w-full min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
7171
indent.indentClass(depth),
7272
)}
7373
onKeyDown={(event) => {

‎app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export default function FileNameColumn(props: FileNameColumnProps) {
6060
return (
6161
<div
6262
className={tailwindMerge.twJoin(
63-
'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
63+
'flex h-table-row w-full min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
6464
indent.indentClass(depth),
6565
)}
6666
onKeyDown={(event) => {

‎app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
9696
return (
9797
<div
9898
className={tailwindMerge.twJoin(
99-
'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
99+
'flex h-table-row w-full min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
100100
indent.indentClass(depth),
101101
)}
102102
onKeyDown={(event) => {

‎app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
5252
return (
5353
<div
5454
className={tailwindMerge.twMerge(
55-
'flex h-table-row min-w-max items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y rounded-rows-child',
55+
'flex h-table-row w-full min-w-48 max-w-96 items-center gap-name-column-icon whitespace-nowrap rounded-l-full px-name-column-x py-name-column-y contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
5656
indent.indentClass(depth),
5757
)}
5858
onKeyDown={(event) => {

‎app/gui/src/dashboard/components/dashboard/TheModal.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,7 @@ export default function TheModal() {
1515
return (
1616
<AnimatePresence>
1717
{modal && (
18-
<motion.div
19-
initial={{ opacity: 0 }}
20-
animate={{ opacity: 1 }}
21-
exit={{ opacity: 0 }}
22-
/* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
23-
transition={{ duration: 0.2 }}
24-
>
18+
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
2519
<DialogTrigger key={key} defaultOpen>
2620
{/* This component suppresses the warning about the target not being pressable element. */}
2721
<Pressable>

‎app/gui/src/dashboard/components/dashboard/column/DocsColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default function DocsColumn(props: column.AssetColumnProps) {
88
const { item } = props
99

1010
return (
11-
<div className="flex max-w-drive-docs-column items-center gap-column-items overflow-hidden whitespace-nowrap">
11+
<div className="flex max-w-drive-docs-column items-center gap-column-items overflow-hidden whitespace-nowrap contain-strict [contain-intrinsic-size:37px] [content-visibility:auto]">
1212
{item.description}
1313
</div>
1414
)

‎app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function LabelsColumn(props: column.AssetColumnProps) {
4545
self?.permission === permissions.PermissionAction.admin)
4646

4747
return (
48-
<div className="group flex items-center gap-column-items">
48+
<div className="group flex items-center gap-column-items contain-strict [contain-intrinsic-size:37px] [content-visibility:auto]">
4949
{(item.labels ?? [])
5050
.filter((label) => labelsByName.has(label))
5151
.map((label) => (

‎app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,9 @@ import { formatDateTime } from '#/utilities/dateTime'
77
export default function ModifiedColumn(props: AssetColumnProps) {
88
const { item } = props
99

10-
return <Text>{formatDateTime(new Date(item.modifiedAt))}</Text>
10+
return (
11+
<Text className="contain-strict [contain-intrinsic-size:37px] [content-visibility:auto]">
12+
{formatDateTime(new Date(item.modifiedAt))}
13+
</Text>
14+
)
1115
}

‎app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default function SharedWithColumn(props: SharedWithColumnPropsInternal) {
5656
(self?.permission === PermissionAction.own || self?.permission === PermissionAction.admin)
5757

5858
return (
59-
<div className="group flex items-center gap-column-items">
59+
<div className="group flex items-center gap-column-items contain-strict [contain-intrinsic-size:37px] [content-visibility:auto]">
6060
{(category.type === 'trash' ?
6161
assetPermissions.filter((permission) => permission.permission === PermissionAction.own)
6262
: assetPermissions

‎app/gui/src/dashboard/components/dashboard/column/columnUtils.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,12 @@ const NORMAL_COLUMN_CSS_CLASSES = `px-cell-x py ${COLUMN_CSS_CLASSES}`
7070
/** CSS classes for every column. */
7171
export const COLUMN_CSS_CLASS: Readonly<Record<Column, string>> = {
7272
[Column.name]: `rounded-rows-skip-level min-w-drive-name-column h-full p-0 border-l-0 ${COLUMN_CSS_CLASSES}`,
73-
[Column.modified]: `min-w-drive-modified-column ${NORMAL_COLUMN_CSS_CLASSES}`,
74-
[Column.sharedWith]: `min-w-drive-shared-with-column ${NORMAL_COLUMN_CSS_CLASSES}`,
75-
[Column.labels]: `min-w-drive-labels-column ${NORMAL_COLUMN_CSS_CLASSES}`,
76-
[Column.accessedByProjects]: `min-w-drive-accessed-by-projects-column ${NORMAL_COLUMN_CSS_CLASSES}`,
77-
[Column.accessedData]: `min-w-drive-accessed-data-column ${NORMAL_COLUMN_CSS_CLASSES}`,
78-
[Column.docs]: `min-w-drive-docs-column ${NORMAL_COLUMN_CSS_CLASSES}`,
73+
[Column.modified]: `min-w-drive-modified-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
74+
[Column.sharedWith]: `min-w-drive-shared-with-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
75+
[Column.labels]: `min-w-drive-labels-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
76+
[Column.accessedByProjects]: `min-w-drive-accessed-by-projects-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
77+
[Column.accessedData]: `min-w-drive-accessed-data-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
78+
[Column.docs]: `min-w-drive-docs-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
7979
}
8080

8181
// =====================

‎app/gui/src/dashboard/layouts/AssetsTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2696,7 +2696,7 @@ export default function AssetsTable(props: AssetsTableProps) {
26962696
}
26972697
}}
26982698
>
2699-
<table className="isolate table-fixed border-collapse rounded-rows">
2699+
<table className="rr-block isolate table-fixed border-collapse rounded-rows">
27002700
<thead className="sticky top-0 z-1 bg-dashboard">{headerRow}</thead>
27012701
<tbody ref={bodyRef}>
27022702
{itemRows}

‎app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export default function UserGroupUserRow(props: UserGroupUserRowProps) {
7373
</ariaComponents.Text>
7474
</div>
7575
</aria.Cell>
76-
<aria.Cell className="relative bg-transparent p-0 opacity-0 group-hover-2:opacity-100">
76+
<aria.Cell className="rounded-rows-have-level relative bg-transparent p-0 opacity-0 group-hover-2:opacity-100">
7777
{isAdmin && (
7878
<ariaComponents.DialogTrigger>
7979
<ariaComponents.Button

‎app/gui/src/dashboard/modals/DragModal.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@ import * as React from 'react'
33

44
import * as modalProvider from '#/providers/ModalProvider'
55

6-
import Modal from '#/components/Modal'
7-
86
import { useEventCallback } from '#/hooks/eventCallbackHooks'
9-
import * as tailwindMerge from '#/utilities/tailwindMerge'
7+
import { DIALOG_BACKGROUND } from '../components/AriaComponents'
108

119
// =================
1210
// === Constants ===
@@ -56,8 +54,10 @@ export default function DragModal(props: DragModalProps) {
5654
}
5755
}
5856
const onDragEnd = () => {
59-
onDragEndOuter()
60-
unsetModal()
57+
React.startTransition(() => {
58+
onDragEndOuter()
59+
unsetModal()
60+
})
6161
}
6262
// Update position (non-FF)
6363
document.addEventListener('drag', onDrag, { capture: true })
@@ -72,14 +72,16 @@ export default function DragModal(props: DragModalProps) {
7272
}, [offsetPx, offsetXPx, offsetYPx, onDragEndOuter, unsetModal])
7373

7474
return (
75-
<Modal className="pointer-events-none absolute size-full overflow-hidden">
75+
<div className="pointer-events-none absolute size-full overflow-hidden">
7676
<div
7777
{...passthrough}
7878
style={{ left, top, ...style }}
79-
className={tailwindMerge.twMerge('relative w-min', className)}
79+
className={DIALOG_BACKGROUND({
80+
className: ['relative w-min', className],
81+
})}
8082
>
8183
{children}
8284
</div>
83-
</Modal>
85+
</div>
8486
)
8587
}

‎app/gui/tailwind.config.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -558,20 +558,32 @@ inset 0 -36px 51px -51px #00000014`,
558558

559559
'.rounded-rows': {
560560
[`:where(
561-
& > tbody > tr:nth-child(odd of .rounded-rows-child) > td:not(.rounded-rows-skip-level),
562-
& > tbody > tr:nth-child(odd of .rounded-rows-child) > td.rounded-rows-skip-level > .rounded-rows-child
561+
& :nth-child(odd of .rounded-rows-child) > .rounded-rows-have-level
563562
)`]: {
564563
backgroundColor: `rgb(0 0 0 / 3%)`,
565564
},
566565
[`:where(
567-
& > tbody > tr.rounded-rows-child.selected > td:not(.rounded-rows-skip-level),
568-
& > tbody > tr.rounded-rows-child.selected > td.rounded-rows-skip-level > .rounded-rows-child
566+
& :nth-child(odd of .rounded-rows-child) > .rounded-rows-skip-level > .rounded-rows-child
567+
)`]: {
568+
backgroundColor: `rgb(0 0 0 / 3%)`,
569+
},
570+
[`:where(
571+
& .selected > .rounded-rows-have-level
572+
)`]: {
573+
backgroundColor: 'rgb(255 255 255 / 90%)',
574+
},
575+
[`:where(
576+
& .selected > .rounded-rows-skip-level > .rounded-rows-child
569577
)`]: {
570578
backgroundColor: 'rgb(255 255 255 / 90%)',
571579
},
572580
[`:where(
573-
& > tbody > tr.rounded-rows-child[data-drop-target] > td:not(.rounded-rows-skip-level),
574-
& > tbody > tr.rounded-rows-child[data-drop-target] > td.rounded-rows-skip-level > .rounded-rows-child
581+
& [data-drop-target]:nth-child(odd of .rounded-rows-child) > .rounded-rows-have-level
582+
)`]: {
583+
backgroundColor: 'rgb(0 0 0 / 8%)',
584+
},
585+
[`:where(
586+
& [data-drop-target]:nth-child(odd of .rounded-rows-child) > .rounded-rows-skip-level > .rounded-rows-child
575587
)`]: {
576588
backgroundColor: 'rgb(0 0 0 / 8%)',
577589
},

0 commit comments

Comments
 (0)