improvement(tables): improve timezone loading state

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.test.ts

@@ -120,10 +120,8 @@ describe('dateEditorRawValue', () => {
 
     act(() => root.render(createElement(InlineEditor, props)))
 
-    expect(container.querySelector('input')).toMatchObject({
-      disabled: true,
-      placeholder: 'Loading timezone...',
-    })
+    expect(container.querySelector('input')).toBeNull()
+    expect(container.querySelector('[role="status"]')?.textContent).toBe('Loading timezone…')
 
     mockUseTimezoneState.mockReturnValue({
       timezone: 'America/Los_Angeles',

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/cells/inline-editors.tsx

@@ -81,15 +81,9 @@ function InlineDateEditor(props: InlineEditorProps) {
 
   if (ttlTimezoneUnavailable) {
     return (
-      <input
-        type='text'
-        value=''
-        disabled
-        placeholder={
-          timezoneState.status === 'error' ? 'Timezone unavailable' : 'Loading timezone...'
-        }
-        className='w-full min-w-0 border-none bg-transparent p-0 text-[var(--text-muted)] text-small outline-none'
-      />
+      <span role='status' className='w-full min-w-0 truncate text-[var(--text-muted)] text-small'>
+        {timezoneState.status === 'error' ? 'Timezone unavailable' : 'Loading timezone…'}
+      </span>
     )
   }