chore(deps): upgrades react-diff-viewer-continued to v4.0.4 to suppress react 19 warnings and use ESM imports (#10834)

The `react-diff-viewer-continued` package now includes React 19 in its
peer dependencies thanks to
https://github.com/Aeolun/react-diff-viewer-continued/pull/56. This new
version also exports as ESM by default ftw.

packages/next/package.json

@@ -93,7 +93,7 @@
     "http-status": "2.1.0",
     "path-to-regexp": "6.3.0",
     "qs-esm": "7.0.2",
-    "react-diff-viewer-continued": "3.2.6",
+    "react-diff-viewer-continued": "4.0.4",
     "sass": "1.77.4",
     "sonner": "^1.7.0",
     "uuid": "10.0.0"

packages/next/src/views/Version/RenderFieldsToDiff/fields/Relationship/index.tsx

@@ -5,7 +5,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { useConfig } from '@payloadcms/ui'
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/shared'
 import React from 'react'
-import ReactDiffViewerImport from 'react-diff-viewer-continued'
+import ReactDiffViewer from 'react-diff-viewer-continued'
 
 import type { DiffComponentProps } from '../types.js'
 
@@ -13,9 +13,6 @@ import Label from '../../Label/index.js'
 import { diffStyles } from '../styles.js'
 import './index.scss'
 
-const ReactDiffViewer = (ReactDiffViewerImport.default ||
-  ReactDiffViewerImport) as unknown as typeof ReactDiffViewerImport.default
-
 const baseClass = 'relationship-diff'
 
 type RelationshipValue = Record<string, any>

packages/next/src/views/Version/RenderFieldsToDiff/fields/Select/DiffViewer/index.tsx

@@ -1,9 +1,6 @@
 'use client'
 import React from 'react'
-import ReactDiffViewerImport, { DiffMethod } from 'react-diff-viewer-continued'
-
-const ReactDiffViewer = (ReactDiffViewerImport.default ||
-  ReactDiffViewerImport) as unknown as typeof ReactDiffViewerImport.default
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
 
 export const DiffViewer: React.FC<{
   comparisonToRender: string

packages/next/src/views/Version/RenderFieldsToDiff/fields/Text/DiffViewer/index.tsx

@@ -1,9 +1,7 @@
 'use client'
 import React from 'react'
-import ReactDiffViewerImport, { DiffMethod } from 'react-diff-viewer-continued'
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued'
 
-const ReactDiffViewer = (ReactDiffViewerImport.default ||
-  ReactDiffViewerImport) as unknown as typeof ReactDiffViewerImport.default
 export const DiffViewer: React.FC<{
   comparisonToRender: string
   diffMethod: string

packages/next/src/views/Version/RenderFieldsToDiff/fields/styles.ts

@@ -1,4 +1,7 @@
 export const diffStyles = {
+  diffContainer: {
+    minWidth: 'unset',
+  },
   variables: {
     dark: {
       addedBackground: 'var(--theme-success-900)',

packages/next/src/views/Version/RenderFieldsToDiff/index.scss

@@ -6,6 +6,10 @@
     flex-direction: column;
     gap: var(--base);
 
+    [role='banner'] {
+      display: none !important;
+    }
+
     &__field {
       overflow-wrap: anywhere;
       display: flex;

packages/next/src/views/Version/RenderFieldsToDiff/index.tsx

@@ -1,8 +1,9 @@
 'use client'
 import type { DiffMethod } from 'react-diff-viewer-continued'
 
+import { ShimmerEffect, StaggeredShimmers } from '@payloadcms/ui'
 import { fieldAffectsData, fieldIsID } from 'payload/shared'
-import React from 'react'
+import React, { Fragment, useEffect } from 'react'
 
 import type { diffComponents as _diffComponents } from './fields/index.js'
 import type { FieldDiffProps, Props } from './types.js'
@@ -25,129 +26,145 @@ export const RenderFieldsToDiff: React.FC<Props> = ({
   // Without it, you could pass a UI field to the Tabs component, without it erroring
   const diffComponents: typeof _diffComponents = __diffComponents as typeof _diffComponents
 
+  const [hasMounted, setHasMounted] = React.useState(false)
+
+  // defer rendering until after the first mount as the CSS is loaded with Emotion
+  // this will ensure that the CSS is loaded before rendering the diffs and prevent CLS
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
   return (
     <div className={baseClass}>
-      {fields?.map((field, i) => {
-        if (fieldIsID(field)) {
-          return null
-        }
-
-        const Component = diffComponents[field.type]
-
-        const isRichText = field.type === 'richText'
-        const diffMethod: DiffMethod = diffMethods[field.type] || 'CHARS'
-
-        if (Component) {
-          if (fieldAffectsData(field)) {
-            const fieldName = field.name
-            const valueIsObject = field.type === 'code' || field.type === 'json'
-
-            const versionValue = valueIsObject
-              ? JSON.stringify(version?.[fieldName])
-              : version?.[fieldName]
-
-            const comparisonValue = valueIsObject
-              ? JSON.stringify(comparison?.[fieldName])
-              : comparison?.[fieldName]
-
-            const hasPermission =
-              fieldPermissions === true ||
-              fieldPermissions?.[fieldName] === true ||
-              fieldPermissions?.[fieldName]?.read
-
-            const subFieldPermissions =
-              fieldPermissions === true ||
-              fieldPermissions?.[fieldName] === true ||
-              fieldPermissions?.[fieldName]?.fields
-
-            if (!hasPermission) {
+      {!hasMounted ? (
+        <Fragment>
+          <ShimmerEffect height="8rem" width="100%" />
+        </Fragment>
+      ) : (
+        <Fragment>
+          {fields?.map((field, i) => {
+            if (fieldIsID(field)) {
               return null
             }
 
-            const baseCellProps: FieldDiffProps = {
-              comparison: comparisonValue,
-              diffComponents,
-              diffMethod,
-              field,
-              fieldPermissions: subFieldPermissions,
-              fields: 'fields' in field ? field?.fields : fields,
-              i18n,
-              isRichText,
-              locales,
-              version: versionValue,
+            const Component = diffComponents[field.type]
+
+            const isRichText = field.type === 'richText'
+            const diffMethod: DiffMethod = diffMethods[field.type] || 'CHARS'
+
+            if (Component) {
+              if (fieldAffectsData(field)) {
+                const fieldName = field.name
+                const valueIsObject = field.type === 'code' || field.type === 'json'
+
+                const versionValue = valueIsObject
+                  ? JSON.stringify(version?.[fieldName])
+                  : version?.[fieldName]
+
+                const comparisonValue = valueIsObject
+                  ? JSON.stringify(comparison?.[fieldName])
+                  : comparison?.[fieldName]
+
+                const hasPermission =
+                  fieldPermissions === true ||
+                  fieldPermissions?.[fieldName] === true ||
+                  fieldPermissions?.[fieldName]?.read
+
+                const subFieldPermissions =
+                  fieldPermissions === true ||
+                  fieldPermissions?.[fieldName] === true ||
+                  fieldPermissions?.[fieldName]?.fields
+
+                if (!hasPermission) {
+                  return null
+                }
+
+                const baseCellProps: FieldDiffProps = {
+                  comparison: comparisonValue,
+                  diffComponents,
+                  diffMethod,
+                  field,
+                  fieldPermissions: subFieldPermissions,
+                  fields: 'fields' in field ? field?.fields : fields,
+                  i18n,
+                  isRichText,
+                  locales,
+                  version: versionValue,
+                }
+
+                if (field.localized) {
+                  return (
+                    <div className={`${baseClass}__field`} key={i}>
+                      {locales.map((locale, index) => {
+                        const versionLocaleValue = versionValue?.[locale]
+                        const comparisonLocaleValue = comparisonValue?.[locale]
+
+                        const cellProps = {
+                          ...baseCellProps,
+                          comparison: comparisonLocaleValue,
+                          version: versionLocaleValue,
+                        }
+
+                        return (
+                          <div className={`${baseClass}__locale`} key={[locale, index].join('-')}>
+                            <div className={`${baseClass}__locale-value`}>
+                              <Component {...cellProps} locale={locale} />
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  )
+                }
+
+                return (
+                  <div className={`${baseClass}__field`} key={i}>
+                    <Component {...baseCellProps} />
+                  </div>
+                )
+              }
+
+              if (field.type === 'tabs' && 'tabs' in field) {
+                const Tabs = diffComponents.tabs
+
+                return (
+                  <Tabs
+                    comparison={comparison}
+                    diffComponents={diffComponents}
+                    field={field}
+                    fieldPermissions={fieldPermissions}
+                    fields={[]}
+                    i18n={i18n}
+                    key={i}
+                    locales={locales}
+                    version={version}
+                  />
+                )
+              }
+
+              // At this point, we are dealing with a field with subfields but no
+              // nested data, eg. row, collapsible, etc.
+              if ('fields' in field) {
+                return (
+                  <Component
+                    comparison={comparison}
+                    diffComponents={diffComponents}
+                    field={field}
+                    fieldPermissions={fieldPermissions}
+                    fields={field.fields}
+                    i18n={i18n}
+                    key={i}
+                    locales={locales}
+                    version={version}
+                  />
+                )
+              }
             }
 
-            if (field.localized) {
-              return (
-                <div className={`${baseClass}__field`} key={i}>
-                  {locales.map((locale, index) => {
-                    const versionLocaleValue = versionValue?.[locale]
-                    const comparisonLocaleValue = comparisonValue?.[locale]
-
-                    const cellProps = {
-                      ...baseCellProps,
-                      comparison: comparisonLocaleValue,
-                      version: versionLocaleValue,
-                    }
-
-                    return (
-                      <div className={`${baseClass}__locale`} key={[locale, index].join('-')}>
-                        <div className={`${baseClass}__locale-value`}>
-                          <Component {...cellProps} locale={locale} />
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              )
-            }
-
-            return (
-              <div className={`${baseClass}__field`} key={i}>
-                <Component {...baseCellProps} />
-              </div>
-            )
-          }
-
-          if (field.type === 'tabs' && 'tabs' in field) {
-            const Tabs = diffComponents.tabs
-
-            return (
-              <Tabs
-                comparison={comparison}
-                diffComponents={diffComponents}
-                field={field}
-                fieldPermissions={fieldPermissions}
-                fields={[]}
-                i18n={i18n}
-                key={i}
-                locales={locales}
-                version={version}
-              />
-            )
-          }
-
-          // At this point, we are dealing with a field with subfields but no
-          // nested data, eg. row, collapsible, etc.
-          if ('fields' in field) {
-            return (
-              <Component
-                comparison={comparison}
-                diffComponents={diffComponents}
-                field={field}
-                fieldPermissions={fieldPermissions}
-                fields={field.fields}
-                i18n={i18n}
-                key={i}
-                locales={locales}
-                version={version}
-              />
-            )
-          }
-        }
-
-        return null
-      })}
+            return null
+          })}
+        </Fragment>
+      )}
     </div>
   )
 }

tsconfig.base.json

@@ -31,7 +31,7 @@
       }
     ],
     "paths": {
-      "@payload-config": ["./test/hooks/config.ts"],
+      "@payload-config": ["./test/versions/config.ts"],
       "@payloadcms/live-preview": ["./packages/live-preview/src"],
       "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
       "@payloadcms/live-preview-vue": ["./packages/live-preview-vue/src/index.ts"],