fix: aligns first render for hydration of dates in list view (#10541)

### What?
The list view was throwing a hydration error for date fields.

### Why?
The issue really stems from the fact that cells are client rendered. We
dynamically load the dateFNS Locale object at runtime to keep the bundle
size small — which makes sense. But on the first render that means we do
not have the Locale object from the known locale so the server/client
determines what to render it as. This causes a mismatch when hydrating.

In the future I think cells could be server rendered and that would
solve the need for this fix which adds "Loading..." while the dateFNS
Locale is loaded.

I think server rendering the cells would allow us to import the dateFNS
Locale inline (blocking) and then pass the rendered string down to the
list view. This should work because we **know** the locale on the
server.

### How?
In this PR, it adds a "Loading..." fallback for the date cell if the
dateFNS Locale has not loaded yet.

Fixes #10044

packages/ui/src/utilities/formatDate.ts

@@ -10,7 +10,9 @@ type FormatDateArgs = {
 
 export const formatDate = ({ date, i18n, pattern }: FormatDateArgs): string => {
   const theDate = new Date(date)
-  return format(theDate, pattern, { locale: i18n.dateFNS })
+  return i18n.dateFNS
+    ? format(theDate, pattern, { locale: i18n.dateFNS })
+    : `${i18n.t('general:loading')}...`
 }
 
 type FormatTimeToNowArgs = {
@@ -20,5 +22,7 @@ type FormatTimeToNowArgs = {
 
 export const formatTimeToNow = ({ date, i18n }: FormatTimeToNowArgs): string => {
   const theDate = new Date(date)
-  return formatDistanceToNow(theDate, { locale: i18n.dateFNS })
+  return i18n?.dateFNS
+    ? formatDistanceToNow(theDate, { locale: i18n.dateFNS })
+    : `${i18n.t('general:loading')}...`
 }