fix(i18n): translate structure tool loading pane

packages/sanity/src/desk/i18n/resources.ts

@@ -364,6 +364,10 @@ const structureLocaleStrings = defineLocalesResources('structure', {
   /** The title of the document not found pane if the schema is unknown */
   'panes.document-pane.document-unknown-type.without-schema.text':
     'This document does not exist, and no schema type was specified for it.',
+  /** Default message shown while resolving the structure definition for an asynchronous node */
+  'panes.resolving.default-message': 'Loading…',
+  /** Message shown while resolving the structure definition for an asynchronous node and it is taking a while (more than 5s) */
+  'panes.resolving.slow-resolve-message': 'Still loading…',
   /** The text to display when type is missing */
   'panes.unknown-pane-type.missing-type.text':
     'Structure item is missing required <Code>type</Code> property.',

packages/sanity/src/desk/panes/loading/LoadingPane.tsx

@@ -1,15 +1,17 @@
-import {Box, CardTone, Flex, Spinner, Text, _raf2} from '@sanity/ui'
+import {Box, type CardTone, Flex, Spinner, Text, _raf2} from '@sanity/ui'
 import React, {memo, useMemo, useState, useEffect} from 'react'
 import {Observable} from 'rxjs'
 import styled from 'styled-components'
+import {structureLocaleNamespace} from '../../i18n'
 import {Delay} from '../../components/Delay'
 import {Pane, PaneContent} from '../../components/pane'
-import {getWaitMessages} from './getWaitMessages'
+import {WaitMessage, getWaitMessages} from './getWaitMessages'
+import {useTranslation} from 'sanity'
 
 interface LoadingPaneProps {
   delay?: number
   flex?: number
-  message?: string | ((p: string[]) => string | Observable<string>)
+  message?: string | ((p: string[]) => string | Observable<WaitMessage>)
   minWidth?: number
   paneKey: string
   path?: string
@@ -19,7 +21,7 @@ interface LoadingPaneProps {
 }
 
 const DELAY = false
-const DEFAULT_MESSAGE = 'Loading…'
+const DEFAULT_MESSAGE_KEY = 'panes.resolving.default-message'
 
 const Content = styled(Flex)`
   opacity: 0;
@@ -46,6 +48,8 @@ export const LoadingPane = memo((props: LoadingPaneProps) => {
     tone,
   } = props
 
+  const {t} = useTranslation(structureLocaleNamespace)
+
   const resolvedMessage = useMemo(() => {
     if (typeof messageProp === 'function') {
       return messageProp(path ? path.split(';') : [])
@@ -56,17 +60,19 @@ export const LoadingPane = memo((props: LoadingPaneProps) => {
 
   const [currentMessage, setCurrentMessage] = useState<string | null>(() => {
     if (typeof resolvedMessage === 'string') return resolvedMessage
-    return DEFAULT_MESSAGE
+    return DEFAULT_MESSAGE_KEY
   })
 
   useEffect(() => {
     if (typeof resolvedMessage !== 'object') return undefined
     if (typeof resolvedMessage.subscribe === 'function') return undefined
 
-    const sub = resolvedMessage.subscribe(setCurrentMessage)
+    const sub = resolvedMessage.subscribe((message) => {
+      setCurrentMessage('messageKey' in message ? t(message.messageKey) : message.message)
+    })
 
     return () => sub.unsubscribe()
-  }, [resolvedMessage])
+  }, [resolvedMessage, t])
 
   const [contentElement, setContentElement] = useState<HTMLDivElement | null>(null)
   const [mounted, setMounted] = useState(false)

packages/sanity/src/desk/panes/loading/getWaitMessages.ts

@@ -1,14 +1,19 @@
-import {Observable, of, merge} from 'rxjs'
+import {type Observable, of, merge} from 'rxjs'
 import {mapTo, delay} from 'rxjs/operators'
 import {isDev} from 'sanity'
 
 /**
  * @internal
  */
-export function getWaitMessages(path: string[]): Observable<string> {
-  const thresholds = [
-    {ms: 300, message: 'Loading…'},
-    {ms: 5000, message: 'Still loading…'},
+export type WaitMessage = {messageKey: string} | {message: string}
+
+/**
+ * @internal
+ */
+export function getWaitMessages(path: string[]): Observable<WaitMessage> {
+  const thresholds: (WaitMessage & {ms: number})[] = [
+    {ms: 300, messageKey: 'panes.resolving.default-message'},
+    {ms: 5000, messageKey: 'panes.resolving.slow-resolve-message'},
   ]
 
   if (isDev) {
@@ -26,5 +31,16 @@ export function getWaitMessages(path: string[]): Observable<string> {
 
   const src = of(null)
 
-  return merge(...thresholds.map(({ms, message}) => src.pipe(mapTo(message), delay(ms))))
+  return merge(
+    ...thresholds.map((threshold) =>
+      src.pipe(
+        mapTo(
+          'messageKey' in threshold
+            ? {messageKey: threshold.messageKey}
+            : {message: threshold.message},
+        ),
+        delay(threshold.ms),
+      ),
+    ),
+  )
 }