@teambit/workspace 1.0.1079 → 1.0.1081

package/ui/workspace/use-workspace.ts

@@ -1,8 +1,8 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ComponentModel } from '@teambit/component';
 import useLatest from '@react-hook/latest';
 import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { gql, useApolloClient } from '@apollo/client';
 import type { ComponentIdObj } from '@teambit/component-id';
 import { ComponentID } from '@teambit/component-id';
 
@@ -19,8 +19,15 @@ type UseWorkspaceOptions = {
 };
 type RawComponent = { id: ComponentIdObj };
 
-const wcComponentFields = gql`
-  fragment wcComponentFields on Component {
+/**
+ * Cheap, card-renderable fields only. Everything here resolves from already-loaded component
+ * metadata (id, env, aspects, compositions, preview, deprecation, server, buildStatus, description),
+ * so the light query returns fast and the grid can paint immediately. The two expensive async
+ * resolvers — `status` (getStatus(): git/scope compare) and `issuesCount` (getIssues(): dependency
+ * analysis) — are deliberately omitted here and fetched separately by `wcComponentDetailFields`.
+ */
+const wcComponentFieldsLight = gql`
+  fragment wcComponentFieldsLight on Component {
     id {
       name
       version
@@ -37,18 +44,6 @@ const wcComponentFields = gql`
       identifier
     }
     description
-    issuesCount
-    status {
-      isOutdated
-      isNew
-      isInScope
-      isStaged
-      modifyInfo {
-        hasModifiedFiles
-        hasModifiedDependencies
-      }
-      isDeleted
-    }
     buildStatus
     preview {
       includesEnvTemplate
@@ -72,40 +67,100 @@ const wcComponentFields = gql`
   }
 `;
 
-const WORKSPACE = gql`
-  query workspace {
+/**
+ * The expensive per-component fields, split out so they never block first paint. These drive the
+ * status pills (changed/building) and the issues badge, both of which gracefully degrade to a
+ * neutral "built" / no-issues state until this query resolves.
+ */
+const wcComponentDetailFields = gql`
+  fragment wcComponentDetailFields on Component {
+    id {
+      name
+      version
+      scope
+    }
+    issuesCount
+    status {
+      isOutdated
+      isNew
+      isInScope
+      isStaged
+      modifyInfo {
+        hasModifiedFiles
+        hasModifiedDependencies
+      }
+      isDeleted
+    }
+  }
+`;
+
+/**
+ * Full per-component shape (light + detail). Used by the subscriptions: a single added/changed
+ * component is cheap to fully resolve, so live updates always carry fresh status.
+ */
+const wcComponentFieldsFull = gql`
+  fragment wcComponentFieldsFull on Component {
+    ...wcComponentFieldsLight
+    ...wcComponentDetailFields
+  }
+  ${wcComponentFieldsLight}
+  ${wcComponentDetailFields}
+`;
+
+const WORKSPACE_LIGHT = gql`
+  query workspaceLight {
     workspace {
       name
       path
       icon
       components {
-        ...wcComponentFields
+        ...wcComponentFieldsLight
+      }
+    }
+  }
+  ${wcComponentFieldsLight}
+`;
+
+// The detail fields are fetched one page at a time via the existing `components(offset, limit)`
+// resolver. getStatus()/getIssues() are synchronous CPU work; fetching all 204 at once blocks the
+// server's event loop for ~5s straight (a navigation query issued during that window waited ~10s).
+// Paging it lets the loop breathe between chunks — measured ping latency dropped from ~10s to ~0.3s.
+const WORKSPACE_DETAILS_PAGE = gql`
+  query workspaceDetailsPage($offset: Int!, $limit: Int!) {
+    workspace {
+      components(offset: $offset, limit: $limit) {
+        ...wcComponentDetailFields
       }
     }
   }
-  ${wcComponentFields}
+  ${wcComponentDetailFields}
 `;
 
+// Small pages keep any single server-blocking burst under ~350ms; the gap yields the event loop so
+// other requests (navigation, lanes) are serviced promptly between pages.
+const DETAIL_CHUNK_SIZE = 15;
+const DETAIL_CHUNK_GAP_MS = 60;
+
 const COMPONENT_SUBSCRIPTION_ADDED = gql`
   subscription OnComponentAdded {
     componentAdded {
       component {
-        ...wcComponentFields
+        ...wcComponentFieldsFull
       }
     }
   }
-  ${wcComponentFields}
+  ${wcComponentFieldsFull}
 `;
 
 const COMPONENT_SUBSCRIPTION_CHANGED = gql`
   subscription OnComponentChanged {
     componentChanged {
       component {
-        ...wcComponentFields
+        ...wcComponentFieldsFull
       }
     }
   }
-  ${wcComponentFields}
+  ${wcComponentFieldsFull}
 `;
 
 const COMPONENT_SUBSCRIPTION_REMOVED = gql`
@@ -131,10 +186,94 @@ const COMPONENT_SERVER_STARTED = gql`
   }
 `;
 
+function componentKey(id: ComponentIdObj): string {
+  return `${id.scope}/${id.name}@${id.version}`;
+}
+
 export function useWorkspace(options: UseWorkspaceOptions = {}): UseWorkspaceResult {
+  // Light query drives first paint. cache-and-network so a revisit paints instantly from cache,
+  // then refreshes in the background (the workspace host otherwise defaults to network-only).
   // `previousData` is destructured out (not spread into `...rest`) so the returned shape matches
   // UseWorkspaceResult, which omits it (along with `data`, replaced by `workspace`).
-  const { data, previousData: _previousData, subscribeToMore, ...rest } = useDataQuery(WORKSPACE);
+  const {
+    data,
+    previousData: _previousData,
+    subscribeToMore,
+    loading,
+    ...rest
+  } = useDataQuery(WORKSPACE_LIGHT, {
+    fetchPolicy: 'cache-and-network',
+  });
+
+  // CRITICAL: the detail data (status + issuesCount) is NOT fetched in parallel with the light query.
+  // getStatus()/getIssues() are synchronous CPU work that monopolizes the server's single-threaded
+  // event loop for several seconds on large workspaces; running it concurrently would stall the light
+  // query behind it (measured: light alone ~10ms, but ~5s when racing the detail query) and the grid
+  // would never paint early. So we wait for the light data to arrive AND for the browser to go idle
+  // (i.e. the grid has painted) before kicking off the (chunked) detail fetch in the background.
+  const [detailEnabled, setDetailEnabled] = useState(false);
+  const lightDataReady = Boolean(data?.workspace);
+  const totalComponents = data?.workspace?.components?.length ?? 0;
+
+  useEffect(() => {
+    if (!lightDataReady || detailEnabled || typeof window === 'undefined') return undefined;
+    const enable = () => setDetailEnabled(true);
+    const ric = (window as any).requestIdleCallback as
+      | ((cb: () => void, opts?: { timeout: number }) => number)
+      | undefined;
+    if (ric) {
+      const handle = ric(enable, { timeout: 1000 });
+      return () => (window as any).cancelIdleCallback?.(handle);
+    }
+    const handle = window.setTimeout(enable, 200);
+    return () => window.clearTimeout(handle);
+  }, [lightDataReady, detailEnabled]);
+
+  // Detail (status + issuesCount) is paged in once the grid has painted, with a yield between pages
+  // so the server stays responsive. Results accumulate by component key and merge in progressively —
+  // status pills and issue counts fill in chunk by chunk rather than all-or-nothing after ~5s.
+  const client = useApolloClient();
+  const [detailByKey, setDetailByKey] = useState<Map<string, { status?: any; issuesCount?: number }>>(new Map());
+
+  useEffect(() => {
+    if (!detailEnabled || !totalComponents) return undefined;
+    let cancelled = false;
+
+    (async () => {
+      for (let offset = 0; offset < totalComponents; offset += DETAIL_CHUNK_SIZE) {
+        if (cancelled) return;
+        try {
+          const res = await client.query({
+            query: WORKSPACE_DETAILS_PAGE,
+            variables: { offset, limit: DETAIL_CHUNK_SIZE },
+            fetchPolicy: 'network-only',
+          });
+          if (cancelled) return;
+          const comps: { id: ComponentIdObj; status?: any; issuesCount?: number }[] =
+            res.data?.workspace?.components ?? [];
+          if (comps.length) {
+            setDetailByKey((prev) => {
+              const next = new Map(prev);
+              for (const c of comps) next.set(componentKey(c.id), { status: c.status, issuesCount: c.issuesCount });
+              return next;
+            });
+          }
+        } catch {
+          // a failed page must not abort the rest of the pages
+        }
+        if (cancelled) return;
+        // yield the server event loop between pages
+        await new Promise((resolve) => {
+          setTimeout(resolve, DETAIL_CHUNK_GAP_MS);
+        });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [detailEnabled, totalComponents, client]);
+
   const optionsRef = useLatest(options);
 
   useEffect(() => {
@@ -249,11 +388,30 @@ export function useWorkspace(options: UseWorkspaceOptions = {}): UseWorkspaceRes
   }, [optionsRef]);
 
   const workspace = useMemo(() => {
-    return data?.workspace ? Workspace.from(data?.workspace) : undefined;
-  }, [data?.workspace]);
+    const rawWorkspace = data?.workspace;
+    if (!rawWorkspace) return undefined;
+
+    // Merge the paged-in heavy fields (status, issuesCount) onto the light components by id.
+    // Components are not normalized in the Apollo cache (their `id` is an object, not a scalar key),
+    // so the detail pages are accumulated in `detailByKey` and merged here by hand. The light
+    // component wins when it already carries a value — a live subscription update (full fragment)
+    // refreshes status there, and the paged detail is only the initial enrichment.
+    const components = rawWorkspace.components.map((component: any) => {
+      const detail = detailByKey.get(componentKey(component.id));
+      if (!detail) return component;
+      return {
+        ...component,
+        status: component.status ?? detail.status,
+        issuesCount: component.issuesCount ?? detail.issuesCount,
+      };
+    });
+
+    return Workspace.from({ ...rawWorkspace, components });
+  }, [data?.workspace, detailByKey]);
 
   return {
     workspace,
+    loading,
     subscribeToMore,
     ...rest,
   };

package/ui/workspace/workspace-overview/index.ts

@@ -1,2 +1,2 @@
 export { WorkspaceOverview } from './workspace-overview';
-export { useQueryParamWithDefault, useListParamWithDefault } from './use-query-param-with-default';
+export { useQueryParamWithDefault, useListParamWithDefault } from '@teambit/explorer.ui.components-overview';

package/ui/workspace/workspace-overview/workspace-overview.tsx

@@ -1,116 +1,23 @@
-import React, { useContext, useMemo } from 'react';
-import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
-// Legacy empty state — kept around as a fallback while the new blank state rolls out.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';
-import compact from 'lodash.compact';
-import { ScopeID } from '@teambit/scopes.scope-id';
-import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
+import React, { useContext } from 'react';
 import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
+import { ComponentsOverview } from '@teambit/explorer.ui.components-overview';
 import { WorkspaceContext } from '../workspace-context';
-import { useWorkspaceAggregation } from './use-workspace-aggregation';
-import { useQueryParamWithDefault, useListParamWithDefault } from './use-query-param-with-default';
-import { NamespaceHeader } from './namespace-header';
-import { HopeComponentCard } from './hope-component-card';
-import type { AggregationType } from './workspace-overview.types';
-import { WorkspaceFilterPanel } from './workspace-filter-panel';
 import { WorkspaceBlankState } from './workspace-blank-state';
-import styles from './workspace-overview.module.scss';
 
 export function WorkspaceOverview() {
   const workspace = useContext(WorkspaceContext);
   const { components, componentDescriptors } = workspace;
-
   const { isMinimal } = useWorkspaceMode();
-  const uniqueScopes = [...new Set(components.map((c) => c.id.scope))];
-  const { cloudScopes } = useCloudScopes(uniqueScopes);
-  const cloudMap = new Map((cloudScopes || []).map((s) => [s.id.toString(), s]));
-
-  const compDescriptorMap = new Map(componentDescriptors.map((d) => [d.id.toString(), d]));
-
-  const items = compact(
-    components.map((component) => {
-      if (component.deprecation?.isDeprecate) return null;
-
-      const descriptor = compDescriptorMap.get(component.id.toString());
-      if (!descriptor) return null;
-
-      const cloudScope = cloudMap.get(component.id.scope);
-      const scope =
-        cloudScope ||
-        (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
-        undefined;
-
-      return {
-        component,
-        componentDescriptor: descriptor,
-        scope: scope
-          ? { id: scope.id, icon: (scope as any).icon, backgroundIconColor: (scope as any).backgroundIconColor }
-          : undefined,
-      };
-    })
-  );
-
-  const [aggregation, setAggregation] = useQueryParamWithDefault<AggregationType>('aggregation', 'namespaces');
-  const [activeNamespaces, setActiveNamespaces] = useListParamWithDefault('ns');
-  const [activeScopes, setActiveScopes] = useListParamWithDefault('scopes');
-
-  const filters = useMemo(
-    () => ({ namespaces: activeNamespaces, scopes: activeScopes, statuses: new Set() as any }),
-    [activeNamespaces, activeScopes]
-  );
-
-  const { groups, groupType, availableAggregations, filteredCount } = useWorkspaceAggregation(
-    items,
-    aggregation,
-    filters
-  );
 
   if (!components.length) return <WorkspaceBlankState />;
 
   return (
-    <div className={styles.container}>
-      <WorkspaceFilterPanel
-        aggregation={aggregation}
-        onAggregationChange={setAggregation}
-        availableAggregations={availableAggregations}
-        items={items}
-        activeNamespaces={activeNamespaces}
-        onNamespacesChange={setActiveNamespaces}
-        activeScopes={activeScopes}
-        onScopesChange={setActiveScopes}
-      />
-
-      <div className={styles.content}>
-        {filteredCount === 0 && <WorkspaceBlankState />}
-
-        {groups.map((group) => (
-          <section key={group.name} className={styles.section}>
-            {groupType !== 'none' && (
-              <div className={styles.sectionHeader}>
-                <NamespaceHeader
-                  namespace={group.name}
-                  items={group.items}
-                  scopeIcon={group.scopeIcon}
-                  scopeIconColor={group.scopeIconColor}
-                />
-              </div>
-            )}
-
-            <ComponentGrid className={styles.cardGrid}>
-              {group.items.map((item) => (
-                <HopeComponentCard
-                  key={item.component.id.toString()}
-                  component={item.component}
-                  componentDescriptor={item.componentDescriptor}
-                  scope={item.scope as any}
-                  showPreview={isMinimal}
-                />
-              ))}
-            </ComponentGrid>
-          </section>
-        ))}
-      </div>
-    </div>
+    <ComponentsOverview
+      components={components}
+      componentDescriptors={componentDescriptors}
+      showPreview={isMinimal}
+      storageNamespace="workspace-overview"
+      emptyState={<WorkspaceBlankState />}
+    />
   );
 }

package/ui/workspace/workspace-skeleton.module.scss

@@ -0,0 +1,102 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--background-color, #fff);
+}
+
+/* ---- Top bar ---- */
+
+.topbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  border-bottom: 1px solid var(--border-medium-color, #e6e6e6);
+}
+
+.corner {
+  width: 246px;
+  height: 100%;
+  flex: none;
+  border-right: 1px solid var(--border-medium-color, #e6e6e6);
+  background: color-mix(in srgb, var(--on-background-color, #000) 3%, transparent);
+}
+
+.topbarNav {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 24px;
+}
+
+.navItem {
+  width: 64px;
+  height: 12px;
+  border-radius: 4px;
+  background: var(--surface01-color, color-mix(in srgb, var(--on-background-color, #000) 6%, transparent));
+}
+
+/* ---- Main: sidebar + content ---- */
+
+.main {
+  flex: 1 1;
+  display: flex;
+  min-height: 0;
+}
+
+.sidebar {
+  width: 246px;
+  flex: none;
+  border-right: 1px solid var(--border-medium-color, #e6e6e6);
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  overflow: hidden;
+}
+
+.sidebarSearch {
+  height: 30px;
+  border-radius: 8px;
+  background: var(--surface01-color, color-mix(in srgb, var(--on-background-color, #000) 6%, transparent));
+  margin-bottom: 6px;
+}
+
+.sidebarRow {
+  height: 11px;
+  border-radius: 4px;
+  background: var(--surface01-color, color-mix(in srgb, var(--on-background-color, #000) 6%, transparent));
+}
+
+.content {
+  flex: 1 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* gentle pulse across the whole shell so it reads as loading */
+.sidebar,
+.topbarNav,
+.corner {
+  animation: pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.65;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar,
+  .topbarNav,
+  .corner {
+    animation: none;
+  }
+}

package/ui/workspace/workspace-skeleton.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentsOverviewSkeleton } from '@teambit/explorer.ui.components-overview';
+import styles from './workspace-skeleton.module.scss';
+
+/**
+ * Full-shell loading placeholder shown while the (light) workspace query resolves. Mirrors the real
+ * workspace chrome — top bar, sidebar column, content grid — so there is no blank flash and no
+ * layout shift when the live UI takes over. Previously this gap rendered an empty `<div>`, which
+ * read as a frozen/blank screen on slower workspaces.
+ */
+export function WorkspaceSkeleton() {
+  return (
+    <div className={styles.wrapper} aria-busy="true" aria-live="polite">
+      <div className={styles.topbar}>
+        <div className={styles.corner} />
+        <div className={styles.topbarNav}>
+          <span className={styles.navItem} />
+          <span className={styles.navItem} />
+          <span className={styles.navItem} />
+        </div>
+      </div>
+      <div className={styles.main}>
+        <div className={styles.sidebar}>
+          <span className={styles.sidebarSearch} />
+          {Array.from({ length: 10 }).map((_, i) => (
+            <span key={i} className={styles.sidebarRow} style={{ width: `${55 + ((i * 13) % 35)}%` }} />
+          ))}
+        </div>
+        <div className={styles.content}>
+          <ComponentsOverviewSkeleton count={12} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/workspace/workspace.tsx

@@ -24,6 +24,7 @@ import { useNavigationMessageListener } from '@teambit/workspace.hooks.use-navig
 import { useWorkspace } from './use-workspace';
 import { WorkspaceOverview } from './workspace-overview';
 import { WorkspaceProvider } from './workspace-provider';
+import { WorkspaceSkeleton } from './workspace-skeleton';
 import styles from './workspace.module.scss';
 import type { WorkspaceUI } from '../../workspace.ui.runtime';
 import { ThemeFromUrlSync } from './theme-from-url';
@@ -67,7 +68,11 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
   }, []);
   const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;
   const themeName = currentTheme?.themeName || 'light';
-  onSidebarTogglerChange(handleSidebarToggle);
+  // register the toggler with the parent in an effect, not during render — calling a parent callback
+  // (which stores/setStates it) mid-render risks "cannot update a component while rendering another".
+  useEffect(() => {
+    onSidebarTogglerChange(handleSidebarToggle);
+  }, [onSidebarTogglerChange, handleSidebarToggle]);
 
   useEffect(() => {
     if (!window) return;
@@ -82,14 +87,20 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
 
   const location = useLocation();
 
-  if (!workspace) {
-    return <div className={styles.emptyContainer}></div>;
-  }
+  // push the loaded components into the workspace UI store from an effect rather than during render —
+  // mutating an external store mid-render can re-render its subscribers in the middle of this render.
+  useEffect(() => {
+    if (workspace) workspaceUI.setComponents(workspace.components);
+  }, [workspaceUI, workspace]);
 
-  workspaceUI.setComponents(workspace.components);
   const inIframe = typeof window !== 'undefined' && window.parent && window.parent !== window;
   const isOverview = location.pathname === '/' || location.pathname === '';
   const showTopBar = !isMinimal || (isMinimal && !isOverview);
+  if (!workspace) {
+    // While the light workspace query resolves, show a full-shell skeleton instead of a blank
+    // screen. The heavy per-component data (status, issues) streams in after first paint.
+    return <WorkspaceSkeleton />;
+  }
 
   return (
     <WorkspaceProvider workspace={workspace}>

package/dist/ui/workspace/workspace-overview/card-overlays.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare function ChangedPill(): React.JSX.Element;
-export declare function BuildSpinner(): React.JSX.Element;
-export declare function BuildingPreview(): React.JSX.Element;
-export declare function QueuedPreview(): React.JSX.Element;