dashboard: improve rendering time of data page cells with large string values (#41777)

GitOrigin-RevId: 8640d1728e286ce5317aca659ac719ca5cb49aec

Author: atrakh

npm-packages/dashboard-common/src/features/data/components/Table/DataCell/DataCellValue.tsx

@@ -2,6 +2,9 @@ import { forwardRef } from "react";
 import { isInCommonUTCTimestampRange } from "@common/features/data/lib/helpers";
 import { Tooltip } from "@ui/Tooltip";
 
+// We only render the first bit of a string inside of cells for performance.
+const MAX_CHARS_TO_RENDER = 150;
+
 type DataCellValueProps = {
   isDateField: boolean;
   inferIsDate: boolean;
@@ -52,12 +55,12 @@ export const DataCellValue = forwardRef<HTMLSpanElement, DataCellValueProps>(
           <span
             className={`before:text-content-secondary before:content-['"'] after:text-content-secondary after:content-['"']`}
           >
-            {stringValue}
+            {stringValue.slice(0, MAX_CHARS_TO_RENDER)}
           </span>
         ) : value === undefined ? (
           <span className="text-content-secondary italic">unset</span>
         ) : (
-          <span>{stringValue}</span>
+          <span>{stringValue.slice(0, MAX_CHARS_TO_RENDER)}</span>
         )}
       </span>
     );

npm-packages/dashboard-common/src/features/data/components/Table/DataRow.tsx

@@ -166,6 +166,7 @@ function DataRowLoaded({ index, style, data }: DataRowProps) {
   return (
     <div
       className={classNames(
+        "animate-fadeInFromLoading",
         // Make sure the focus ring is visible on first and last cell
         "focus:ring-none focus:border",
         didJustCreate && "animate-highlight",