fix(structure): use correct loading messages while resolving panes (#…

…6093)

packages/sanity/src/structure/__workshop__/LoadingPaneStory.tsx

@@ -0,0 +1,19 @@
+import {Card, Stack, Text} from '@sanity/ui'
+
+import {PaneLayout} from '../components'
+import {LoadingPane} from '../panes'
+
+export default function LoadingPaneStory() {
+  return (
+    <Stack space={3}>
+      <Card padding={4} tone="positive">
+        <Text align="center">
+          Note: This is <em>intentionally</em> not resolving. We're testing the loading pane!
+        </Text>
+      </Card>
+      <PaneLayout height="fill">
+        <LoadingPane paneKey="loading" />
+      </PaneLayout>
+    </Stack>
+  )
+}

packages/sanity/src/structure/__workshop__/index.ts

@@ -15,5 +15,10 @@ export default defineScope({
       title: 'Document state',
       component: lazy(() => import('./DocumentStateStory')),
     },
+    {
+      name: 'loading-pane',
+      title: 'Loading pane',
+      component: lazy(() => import('./LoadingPaneStory')),
+    },
   ],
 })

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

@@ -61,12 +61,12 @@ export const LoadingPane = memo((props: LoadingPaneProps) => {
 
   const [currentMessage, setCurrentMessage] = useState<string | null>(() => {
     if (typeof resolvedMessage === 'string') return resolvedMessage
-    return DEFAULT_MESSAGE_KEY
+    return t(DEFAULT_MESSAGE_KEY)
   })
 
   useEffect(() => {
     if (typeof resolvedMessage !== 'object') return undefined
-    if (typeof resolvedMessage.subscribe === 'function') return undefined
+    if (typeof resolvedMessage.subscribe !== 'function') return undefined
 
     const sub = resolvedMessage.subscribe((message) => {
       setCurrentMessage('messageKey' in message ? t(message.messageKey) : message.message)