Improve perf

enso-org · Nov 17, 2024 · bdbac7f · bdbac7f
1 parent bca2409
commit bdbac7f
Show file tree

Hide file tree

Showing 19 changed files with 65 additions and 47 deletions.
diff --git a/app/gui/src/dashboard/components/AnimatedBackground.tsx b/app/gui/src/dashboard/components/AnimatedBackground.tsx
@@ -114,15 +114,15 @@ AnimatedBackground.Item = memo(function AnimatedBackgroundItem(props: AnimatedBa
   const isActive = isSelected ?? activeValue === value
 
   return (
-    <div className={twJoin('relative *:isolate', className)}>
+    <div className={twJoin('relative', className)}>
       <AnimatedBackgroundItemUnderlay
         isActive={isActive}
         underlayElement={underlayElement}
         layoutId={layoutId}
         transition={transition}
       />
 
-      {children}
+      <div className="isolate contents">{children}</div>
     </div>
   )
 })
@@ -157,7 +157,7 @@ const AnimatedBackgroundItemUnderlay = memo(function AnimatedBackgroundItemUnder
         <motion.div
           layout="position"
           layoutId={`background-${layoutId}`}
-          className="pointer-events-none absolute inset-0"
+          className="pointer-events-none absolute inset-0 isolate"
           transition={transition}
           variants={VARIANTS}
           initial="hidden"

diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx
@@ -68,6 +68,8 @@ export const BUTTON_STYLES = tv({
     'group',
     // we need to set the height to max-content to prevent the button from growing in flex containers
     'h-[max-content]',
+
+    'flex-none',
     // basic outline
     'outline-offset-[1px] outline-transparent',
     // buttons always have borders

diff --git a/app/gui/src/dashboard/components/Spinner.tsx b/app/gui/src/dashboard/components/Spinner.tsx
@@ -2,7 +2,8 @@
  * @file A spinning arc that animates using the `dasharray-<percentage>` custom Tailwind
  * classes.
  */
-import { twMerge } from '#/utilities/tailwindMerge'
+import * as React from 'react'
+import { twJoin } from 'tailwind-merge'
 
 /** The state of the spinner. It should go from `initial`, to `loading`, to `done`. */
 export type SpinnerState = 'done' | 'initial' | 'loading-fast' | 'loading-medium' | 'loading-slow'
@@ -27,14 +28,17 @@ export interface SpinnerProps {
 }
 
 /** A spinning arc that animates using the `dasharray-<percentage>` custom Tailwind classes. */
-export function Spinner(props: SpinnerProps) {
+// eslint-disable-next-line no-restricted-syntax
+export const Spinner = React.memo(function Spinner(props: SpinnerProps) {
   const { size, padding, className, state } = props
 
+  const cssClasses = twJoin('pointer-events-none contain-strict', className)
+
   return (
     <svg
       width={size}
       height={size}
-      className={className}
+      className={cssClasses}
       style={{ padding }}
       viewBox="0 0 24 24"
       fill="none"
@@ -50,11 +54,11 @@ export function Spinner(props: SpinnerProps) {
         stroke="currentColor"
         strokeLinecap="round"
         strokeWidth={3}
-        className={twMerge(
+        className={twJoin(
           'pointer-events-none origin-center !animate-spin-ease transition-stroke-dasharray [transition-duration:var(--spinner-slow-transition-duration)]',
           SPINNER_CSS_CLASSES[state],
         )}
       />
     </svg>
   )
-}
+})
diff --git a/app/gui/src/dashboard/components/dashboard/AssetRow.tsx b/app/gui/src/dashboard/components/dashboard/AssetRow.tsx
@@ -692,7 +692,7 @@ export function RealAssetInternalRow(props: RealAssetRowInternalProps) {
                   }
                 }}
                 className={tailwindMerge.twMerge(
-                  'h-table-row rounded-full transition-all ease-in-out contain-strict rounded-rows-child [contain-intrinsic-size:37px] [content-visibility:auto]',
+                  'h-table-row rounded-full transition-all ease-in-out rounded-rows-child',
                   visibility,
                   (isDraggedOver || selected) && 'selected',
                 )}

diff --git a/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/DatalinkNameColumn.tsx
@@ -44,7 +44,7 @@ export default function DatalinkNameColumn(props: DatalinkNameColumnProps) {
   return (
     <div
       className={tailwindMerge.twJoin(
-        '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',
+        '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]',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

diff --git a/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/DirectoryNameColumn.tsx
@@ -67,7 +67,7 @@ export default function DirectoryNameColumn(props: DirectoryNameColumnProps) {
   return (
     <div
       className={tailwindMerge.twJoin(
-        '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',
+        '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]',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

diff --git a/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/FileNameColumn.tsx
@@ -60,7 +60,7 @@ export default function FileNameColumn(props: FileNameColumnProps) {
   return (
     <div
       className={tailwindMerge.twJoin(
-        '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',
+        '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]',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

diff --git a/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/ProjectNameColumn.tsx
@@ -96,7 +96,7 @@ export default function ProjectNameColumn(props: ProjectNameColumnProps) {
   return (
     <div
       className={tailwindMerge.twJoin(
-        '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',
+        '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]',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

diff --git a/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx b/app/gui/src/dashboard/components/dashboard/SecretNameColumn.tsx
@@ -52,7 +52,7 @@ export default function SecretNameColumn(props: SecretNameColumnProps) {
   return (
     <div
       className={tailwindMerge.twMerge(
-        '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',
+        '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]',
         indent.indentClass(depth),
       )}
       onKeyDown={(event) => {

diff --git a/app/gui/src/dashboard/components/dashboard/TheModal.tsx b/app/gui/src/dashboard/components/dashboard/TheModal.tsx
@@ -15,13 +15,7 @@ export default function TheModal() {
   return (
     <AnimatePresence>
       {modal && (
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          /* eslint-disable-next-line @typescript-eslint/no-magic-numbers */
-          transition={{ duration: 0.2 }}
-        >
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
           <DialogTrigger key={key} defaultOpen>
             {/* This component suppresses the warning about the target not being pressable element. */}
             <Pressable>

diff --git a/app/gui/src/dashboard/components/dashboard/column/DocsColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/DocsColumn.tsx
@@ -8,7 +8,7 @@ export default function DocsColumn(props: column.AssetColumnProps) {
   const { item } = props
 
   return (
-    <div className="flex max-w-drive-docs-column items-center gap-column-items overflow-hidden whitespace-nowrap">
+    <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]">
       {item.description}
     </div>
   )

diff --git a/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/LabelsColumn.tsx
@@ -45,7 +45,7 @@ export default function LabelsColumn(props: column.AssetColumnProps) {
       self?.permission === permissions.PermissionAction.admin)
 
   return (
-    <div className="group flex items-center gap-column-items">
+    <div className="group flex items-center gap-column-items contain-strict [contain-intrinsic-size:37px] [content-visibility:auto]">
       {(item.labels ?? [])
         .filter((label) => labelsByName.has(label))
         .map((label) => (

diff --git a/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/ModifiedColumn.tsx
@@ -7,5 +7,9 @@ import { formatDateTime } from '#/utilities/dateTime'
 export default function ModifiedColumn(props: AssetColumnProps) {
   const { item } = props
 
-  return <Text>{formatDateTime(new Date(item.modifiedAt))}</Text>
+  return (
+    <Text className="contain-strict [contain-intrinsic-size:37px] [content-visibility:auto]">
+      {formatDateTime(new Date(item.modifiedAt))}
+    </Text>
+  )
 }
diff --git a/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/SharedWithColumn.tsx
@@ -56,7 +56,7 @@ export default function SharedWithColumn(props: SharedWithColumnPropsInternal) {
     (self?.permission === PermissionAction.own || self?.permission === PermissionAction.admin)
 
   return (
-    <div className="group flex items-center gap-column-items">
+    <div className="group flex items-center gap-column-items contain-strict [contain-intrinsic-size:37px] [content-visibility:auto]">
       {(category.type === 'trash' ?
         assetPermissions.filter((permission) => permission.permission === PermissionAction.own)
       : assetPermissions

diff --git a/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts b/app/gui/src/dashboard/components/dashboard/column/columnUtils.ts
@@ -70,12 +70,12 @@ const NORMAL_COLUMN_CSS_CLASSES = `px-cell-x py ${COLUMN_CSS_CLASSES}`
 /** CSS classes for every column. */
 export const COLUMN_CSS_CLASS: Readonly<Record<Column, string>> = {
   [Column.name]: `rounded-rows-skip-level min-w-drive-name-column h-full p-0 border-l-0 ${COLUMN_CSS_CLASSES}`,
-  [Column.modified]: `min-w-drive-modified-column ${NORMAL_COLUMN_CSS_CLASSES}`,
-  [Column.sharedWith]: `min-w-drive-shared-with-column ${NORMAL_COLUMN_CSS_CLASSES}`,
-  [Column.labels]: `min-w-drive-labels-column ${NORMAL_COLUMN_CSS_CLASSES}`,
-  [Column.accessedByProjects]: `min-w-drive-accessed-by-projects-column ${NORMAL_COLUMN_CSS_CLASSES}`,
-  [Column.accessedData]: `min-w-drive-accessed-data-column ${NORMAL_COLUMN_CSS_CLASSES}`,
-  [Column.docs]: `min-w-drive-docs-column ${NORMAL_COLUMN_CSS_CLASSES}`,
+  [Column.modified]: `min-w-drive-modified-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
+  [Column.sharedWith]: `min-w-drive-shared-with-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
+  [Column.labels]: `min-w-drive-labels-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
+  [Column.accessedByProjects]: `min-w-drive-accessed-by-projects-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
+  [Column.accessedData]: `min-w-drive-accessed-data-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
+  [Column.docs]: `min-w-drive-docs-column rounded-rows-have-level ${NORMAL_COLUMN_CSS_CLASSES}`,
 }
 
 // =====================

diff --git a/app/gui/src/dashboard/layouts/AssetsTable.tsx b/app/gui/src/dashboard/layouts/AssetsTable.tsx
@@ -2696,7 +2696,7 @@ export default function AssetsTable(props: AssetsTableProps) {
         }
       }}
     >
-      <table className="isolate table-fixed border-collapse rounded-rows">
+      <table className="rr-block isolate table-fixed border-collapse rounded-rows">
         <thead className="sticky top-0 z-1 bg-dashboard">{headerRow}</thead>
         <tbody ref={bodyRef}>
           {itemRows}

diff --git a/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx b/app/gui/src/dashboard/layouts/Settings/UserGroupUserRow.tsx
@@ -73,7 +73,7 @@ export default function UserGroupUserRow(props: UserGroupUserRowProps) {
           </ariaComponents.Text>
         </div>
       </aria.Cell>
-      <aria.Cell className="relative bg-transparent p-0 opacity-0 group-hover-2:opacity-100">
+      <aria.Cell className="rounded-rows-have-level relative bg-transparent p-0 opacity-0 group-hover-2:opacity-100">
         {isAdmin && (
           <ariaComponents.DialogTrigger>
             <ariaComponents.Button

diff --git a/app/gui/src/dashboard/modals/DragModal.tsx b/app/gui/src/dashboard/modals/DragModal.tsx
@@ -3,10 +3,8 @@ import * as React from 'react'
 
 import * as modalProvider from '#/providers/ModalProvider'
 
-import Modal from '#/components/Modal'
-
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
-import * as tailwindMerge from '#/utilities/tailwindMerge'
+import { DIALOG_BACKGROUND } from '../components/AriaComponents'
 
 // =================
 // === Constants ===
@@ -56,8 +54,10 @@ export default function DragModal(props: DragModalProps) {
       }
     }
     const onDragEnd = () => {
-      onDragEndOuter()
-      unsetModal()
+      React.startTransition(() => {
+        onDragEndOuter()
+        unsetModal()
+      })
     }
     // Update position (non-FF)
     document.addEventListener('drag', onDrag, { capture: true })
@@ -72,14 +72,16 @@ export default function DragModal(props: DragModalProps) {
   }, [offsetPx, offsetXPx, offsetYPx, onDragEndOuter, unsetModal])
 
   return (
-    <Modal className="pointer-events-none absolute size-full overflow-hidden">
+    <div className="pointer-events-none absolute size-full overflow-hidden">
       <div
         {...passthrough}
         style={{ left, top, ...style }}
-        className={tailwindMerge.twMerge('relative w-min', className)}
+        className={DIALOG_BACKGROUND({
+          className: ['relative w-min', className],
+        })}
       >
         {children}
       </div>
-    </Modal>
+    </div>
   )
 }
diff --git a/app/gui/tailwind.config.js b/app/gui/tailwind.config.js
@@ -558,20 +558,32 @@ inset 0 -36px 51px -51px #00000014`,
 
           '.rounded-rows': {
             [`:where(
-              & > tbody > tr:nth-child(odd of .rounded-rows-child) > td:not(.rounded-rows-skip-level),
-              & > tbody > tr:nth-child(odd of .rounded-rows-child) > td.rounded-rows-skip-level > .rounded-rows-child
+              & :nth-child(odd of .rounded-rows-child) > .rounded-rows-have-level
             )`]: {
               backgroundColor: `rgb(0 0 0 / 3%)`,
             },
             [`:where(
-              & > tbody > tr.rounded-rows-child.selected > td:not(.rounded-rows-skip-level),
-              & > tbody > tr.rounded-rows-child.selected > td.rounded-rows-skip-level > .rounded-rows-child
+              & :nth-child(odd of .rounded-rows-child) > .rounded-rows-skip-level > .rounded-rows-child
+            )`]: {
+              backgroundColor: `rgb(0 0 0 / 3%)`,
+            },
+            [`:where(
+              & .selected > .rounded-rows-have-level
+            )`]: {
+              backgroundColor: 'rgb(255 255 255 / 90%)',
+            },
+            [`:where(
+              & .selected > .rounded-rows-skip-level > .rounded-rows-child
             )`]: {
               backgroundColor: 'rgb(255 255 255 / 90%)',
             },
             [`:where(
-              & > tbody > tr.rounded-rows-child[data-drop-target] > td:not(.rounded-rows-skip-level),
-              & > tbody > tr.rounded-rows-child[data-drop-target] > td.rounded-rows-skip-level > .rounded-rows-child
+              & [data-drop-target]:nth-child(odd of .rounded-rows-child) > .rounded-rows-have-level
+            )`]: {
+              backgroundColor: 'rgb(0 0 0 / 8%)',
+            },
+            [`:where(
+              & [data-drop-target]:nth-child(odd of .rounded-rows-child) > .rounded-rows-skip-level > .rounded-rows-child
             )`]: {
               backgroundColor: 'rgb(0 0 0 / 8%)',
             },