feat(next,ui): improves loading states (#6434)

Author: jacobsfletch

next.config.mjs

@@ -17,7 +17,7 @@ export default withBundleAnalyzer(
       ignoreBuildErrors: true,
     },
     experimental: {
-      reactCompiler: false
+      reactCompiler: false,
     },
     async redirects() {
       return [

packages/next/src/layouts/Root/index.tsx

@@ -57,11 +57,13 @@ export const RootLayout = async ({
   })
 
   const payload = await getPayloadHMR({ config })
+
   const i18n: I18nClient = await initI18n({
     config: config.i18n,
     context: 'client',
     language: languageCode,
   })
+
   const clientConfig = await createClientConfig({ config, t: i18n.t })
 
   const dir = (rtlLanguages as unknown as AcceptedLanguages[]).includes(languageCode)

packages/next/src/utilities/initPage/index.ts

@@ -47,6 +47,20 @@ export const initPage = async ({
     language,
   })
 
+  const languageOptions = Object.entries(payload.config.i18n.supportedLanguages || {}).reduce(
+    (acc, [language, languageConfig]) => {
+      if (Object.keys(payload.config.i18n.supportedLanguages).includes(language)) {
+        acc.push({
+          label: languageConfig.translations.general.thisLanguage,
+          value: language,
+        })
+      }
+
+      return acc
+    },
+    [],
+  )
+
   const req = await createLocalReq(
     {
       fallbackLocale: null,
@@ -98,6 +112,7 @@ export const initPage = async ({
     cookies,
     docID,
     globalConfig,
+    languageOptions,
     locale,
     permissions,
     req,

packages/next/src/utilities/initPage/shared.ts

@@ -1,7 +1,6 @@
 import type { SanitizedConfig } from 'payload/types'
 
 const authRouteKeys: (keyof SanitizedConfig['admin']['routes'])[] = [
-  'account',
   'createFirstUser',
   'forgot',
   'login',

packages/next/src/views/API/LocaleSelector/index.tsx

@@ -0,0 +1,23 @@
+import { Select } from '@payloadcms/ui/fields/Select'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import React from 'react'
+
+export const LocaleSelector: React.FC<{
+  localeOptions: {
+    label: Record<string, string> | string
+    value: string
+  }[]
+  onChange: (value: string) => void
+}> = ({ localeOptions, onChange }) => {
+  const { t } = useTranslation()
+
+  return (
+    <Select
+      label={t('general:locale')}
+      name="locale"
+      onChange={(value) => onChange(value)}
+      options={localeOptions}
+      path="locale"
+    />
+  )
+}

packages/next/src/views/API/index.client.tsx

@@ -4,7 +4,6 @@ import { CopyToClipboard } from '@payloadcms/ui/elements/CopyToClipboard'
 import { Gutter } from '@payloadcms/ui/elements/Gutter'
 import { Checkbox } from '@payloadcms/ui/fields/Checkbox'
 import { NumberField as NumberInput } from '@payloadcms/ui/fields/Number'
-import { Select } from '@payloadcms/ui/fields/Select'
 import { Form } from '@payloadcms/ui/forms/Form'
 import { MinimizeMaximize } from '@payloadcms/ui/icons/MinimizeMaximize'
 import { SetViewActions } from '@payloadcms/ui/providers/Actions'
@@ -19,6 +18,7 @@ import * as React from 'react'
 import { toast } from 'react-toastify'
 
 import { SetDocumentStepNav } from '../Edit/Default/SetDocumentStepNav/index.js'
+import { LocaleSelector } from './LocaleSelector/index.js'
 import { RenderJSON } from './RenderJSON/index.js'
 import './index.scss'
 
@@ -173,15 +173,7 @@ export const APIViewClient: React.FC = () => {
                 path="authenticated"
               />
             </div>
-            {localeOptions && (
-              <Select
-                label={t('general:locale')}
-                name="locale"
-                onChange={(value) => setLocale(value)}
-                options={localeOptions}
-                path="locale"
-              />
-            )}
+            {localeOptions && <LocaleSelector localeOptions={localeOptions} onChange={setLocale} />}
             <NumberInput
               label={t('general:depth')}
               max={10}

packages/next/src/views/Account/Settings/LanguageSelector.tsx

@@ -0,0 +1,25 @@
+'use client'
+import type { LanguageOptions } from 'payload/types'
+
+import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect'
+import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import React from 'react'
+
+export const LanguageSelector: React.FC<{
+  languageOptions: LanguageOptions
+}> = (props) => {
+  const { languageOptions } = props
+
+  const { i18n, switchLanguage } = useTranslation()
+
+  return (
+    <ReactSelect
+      inputId="language-select"
+      onChange={async ({ value }) => {
+        await switchLanguage(value)
+      }}
+      options={languageOptions}
+      value={languageOptions.find((language) => language.value === i18n.language)}
+    />
+  )
+}

packages/next/src/views/Account/Settings/index.tsx

@@ -1,34 +1,28 @@
-'use client'
-import { ReactSelect } from '@payloadcms/ui/elements/ReactSelect'
+import type { I18n } from '@payloadcms/translations'
+import type { LanguageOptions } from 'payload/types'
+
 import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
 import React from 'react'
 
 import { ToggleTheme } from '../ToggleTheme/index.js'
+import { LanguageSelector } from './LanguageSelector.js'
 import './index.scss'
 
 const baseClass = 'payload-settings'
 
 export const Settings: React.FC<{
   className?: string
+  i18n: I18n
+  languageOptions: LanguageOptions
 }> = (props) => {
-  const { className } = props
-
-  const { i18n, languageOptions, switchLanguage, t } = useTranslation()
+  const { className, i18n, languageOptions } = props
 
   return (
     <div className={[baseClass, className].filter(Boolean).join(' ')}>
-      <h3>{t('general:payloadSettings')}</h3>
+      <h3>{i18n.t('general:payloadSettings')}</h3>
       <div className={`${baseClass}__language`}>
-        <FieldLabel htmlFor="language-select" label={t('general:language')} />
-        <ReactSelect
-          inputId="language-select"
-          onChange={async ({ value }) => {
-            await switchLanguage(value)
-          }}
-          options={languageOptions}
-          value={languageOptions.find((language) => language.value === i18n.language)}
-        />
+        <FieldLabel htmlFor="language-select" label={i18n.t('general:language')} />
+        <LanguageSelector languageOptions={languageOptions} />
       </div>
       <ToggleTheme />
     </div>

packages/next/src/views/Account/index.tsx

@@ -9,6 +9,7 @@ import { FormQueryParamsProvider } from '@payloadcms/ui/providers/FormQueryParam
 import { notFound } from 'next/navigation.js'
 import React from 'react'
 
+import { getDocumentData } from '../Document/getDocumentData.js'
 import { getDocumentPermissions } from '../Document/getDocumentPermissions.js'
 import { EditView } from '../Edit/index.js'
 import { Settings } from './Settings/index.js'
@@ -21,6 +22,7 @@ export const Account: React.FC<AdminViewProps> = async ({
   searchParams,
 }) => {
   const {
+    languageOptions,
     locale,
     permissions,
     req,
@@ -49,6 +51,13 @@ export const Account: React.FC<AdminViewProps> = async ({
         req,
       })
 
+    const { data, formState } = await getDocumentData({
+      id: user.id,
+      collectionConfig,
+      locale,
+      req,
+    })
+
     const viewComponentProps: ServerSideEditViewProps = {
       initPageResult,
       params,
@@ -58,14 +67,16 @@ export const Account: React.FC<AdminViewProps> = async ({
 
     return (
       <DocumentInfoProvider
-        AfterFields={<Settings />}
+        AfterFields={<Settings i18n={i18n} languageOptions={languageOptions} />}
         action={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`}
         apiURL={`${serverURL}${api}/${userSlug}${user?.id ? `/${user.id}` : ''}`}
         collectionSlug={userSlug}
         docPermissions={docPermissions}
         hasPublishPermission={hasPublishPermission}
         hasSavePermission={hasSavePermission}
         id={user?.id.toString()}
+        initialData={data}
+        initialState={formState}
         isEditing
       >
         <DocumentHeader