fix(mothership): use a spinner while workflow resources load (#8756)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -15,6 +15,7 @@ import {
   FileX,
   Folder as FolderIcon,
   Library,
+  Loader,
   Square,
   SquareArrowUpRight,
   Workflow as WorkflowIcon,
@@ -74,6 +75,13 @@ import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
 const Workflow = lazy(() => import('@/app/workspace/[workspaceId]/w/[workflowId]/workflow'))
 
+const WORKFLOW_LOADING = (
+  <div role='status' className='flex h-full items-center justify-center'>
+    <Loader animate className='size-[18px] text-[var(--text-icon)]' />
+    <span className='sr-only'>Loading workflow</span>
+  </div>
+)
+
 const LOADING_SKELETON = (
   <div className='flex h-full flex-col gap-2 p-6'>
     <Skeleton className='h-[16px] w-[60%]' />
@@ -717,7 +725,7 @@ function EmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowProps) {
   }
 
   return (
-    <Suspense fallback={LOADING_SKELETON}>
+    <Suspense fallback={WORKFLOW_LOADING}>
       <Workflow workspaceId={workspaceId} workflowId={workflowId} embedded />
     </Suspense>
   )
@@ -749,7 +757,7 @@ function ResolveEmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowPr
     )
   }, [canonical, queryClient, workflowId, workspaceId])
 
-  if (isCanonicalPending) return LOADING_SKELETON
+  if (isCanonicalPending) return WORKFLOW_LOADING
 
   if (canonical?.workspaceId && canonical.workspaceId !== workspaceId) {
     return (
@@ -766,7 +774,7 @@ function ResolveEmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowPr
     )
   }
 
-  if (canonical?.workspaceId === workspaceId && !canonical.archivedAt) return LOADING_SKELETON
+  if (canonical?.workspaceId === workspaceId && !canonical.archivedAt) return WORKFLOW_LOADING
 
   return (
     <div className='flex h-full flex-col items-center justify-center gap-3'>