feat(workspace): instant workspace load + pooled previews

components/hooks/use-lane-components/use-lane-components.tsx

@@ -1,5 +1,4 @@
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { gql, useQuery } from '@apollo/client';
 import { ComponentID, ComponentModel, componentOverviewFields } from '@teambit/component';
 import type { LaneId } from '@teambit/lane-id';
 import { ComponentDescriptor } from '@teambit/component-descriptor';
@@ -46,19 +45,32 @@ export type UseLaneComponentsResult = {
   loading?: boolean;
 };
 
-export function useLaneComponents(laneId?: LaneId): UseLaneComponentsResult {
+export type UseLaneComponentsOptions = {
+  skip?: boolean;
+};
+
+export function useLaneComponents(laneId?: LaneId, options: UseLaneComponentsOptions = {}): UseLaneComponentsResult {
+  const shouldSkip = options.skip || !laneId;
   // @ts-ignore - remove once graphql versions are aligned (see #8753)
-  const { data, loading } = useDataQuery(GET_LANE_COMPONENTS, {
-    variables: { ids: [laneId?.toString()], skipList: laneId?.isDefault() },
-    skip: !laneId,
+  const { data, loading } = useQuery(GET_LANE_COMPONENTS, {
+    variables: { ids: [laneId?.toString()], skipList: laneId?.isDefault() ?? false },
+    skip: shouldSkip,
+    fetchPolicy: 'cache-and-network',
+    nextFetchPolicy: 'cache-first',
+    returnPartialData: true,
   });
 
   const rawComps = data?.lanes.list && data?.lanes.list.length > 0 ? data?.lanes.list[0] : data?.lanes.default;
 
-  const components = rawComps?.components?.map((component) => {
-    const componentModel = ComponentModel.from({ ...component, host: data.getHost.id });
-    return componentModel;
-  });
+  // returnPartialData can deliver lane components before the separate getHost
+  // field arrives - treat that as still loading instead of dereferencing undefined
+  const hostId = data?.getHost?.id;
+  const components = hostId
+    ? rawComps?.components?.map((component) => {
+        const componentModel = ComponentModel.from({ ...component, host: hostId });
+        return componentModel;
+      })
+    : undefined;
 
   const componentDescriptors: ComponentDescriptor[] = compact(
     rawComps?.components?.map((rawComponent) => {

components/hooks/use-lanes/use-lanes.tsx

@@ -1,13 +1,18 @@
 import { useMemo, useCallback } from 'react';
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
 import type { LaneModel, LanesQuery } from '@teambit/lanes.ui.models.lanes-model';
 import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
-import { gql } from '@apollo/client';
+import { gql, useQuery } from '@apollo/client';
 import type { LaneId } from '@teambit/lane-id';
 import { isEqual } from 'lodash';
 import type { LanesContextModel } from './lanes-context';
 import { useLanesContext } from './lanes-context';
 
+type LanesQueryCompat = Omit<LanesQuery, 'lanes'> & {
+  lanes?: Omit<NonNullable<LanesQuery['lanes']>, 'viewedLane'> & {
+    viewedLane?: NonNullable<LanesQuery['lanes']>['list'];
+  };
+};
+
 const GET_LANES = gql`
   query Lanes(
     $extensionId: String
@@ -173,7 +178,7 @@ const useRootLanes: UseRootLanes = (viewedLaneId, skip, options = {}, scope) =>
   const { ids, offset, limit, sort } = options;
 
   // @ts-ignore - remove once graphql versions are aligned (see #8753)
-  const { data, fetchMore, loading } = useDataQuery<LanesQuery>(GET_LANES, {
+  const { data, fetchMore, loading } = useQuery<LanesQueryCompat>(GET_LANES, {
     variables: {
       laneIds: ids,
       offset,
@@ -185,11 +190,14 @@ const useRootLanes: UseRootLanes = (viewedLaneId, skip, options = {}, scope) =>
     skip,
     errorPolicy: 'all',
     fetchPolicy: 'cache-and-network',
+    nextFetchPolicy: 'cache-first',
+    returnPartialData: true,
+    notifyOnNetworkStatusChange: false,
   });
 
   const lanesModel = useMemo(() => {
     if (!loading && !!data) {
-      const newLanesModel = LanesModel.from({ data, scope });
+      const newLanesModel = LanesModel.from({ data: data as unknown as LanesQuery, scope });
       return newLanesModel;
     }
     return undefined;
@@ -219,7 +227,7 @@ const useRootLanes: UseRootLanes = (viewedLaneId, skip, options = {}, scope) =>
           const loadingMore = networkStatus === 3;
 
           if (!loadingMore && moreData.lanes) {
-            const newLanesModel = LanesModel.from({ data: moreData });
+            const newLanesModel = LanesModel.from({ data: moreData as unknown as LanesQuery });
             return {
               lanesModel: newLanesModel,
               loading: loadingMore,
@@ -262,7 +270,7 @@ const useRootLanes: UseRootLanes = (viewedLaneId, skip, options = {}, scope) =>
 
 export const useSearchLanes: SearchLanes = (search, skip) => {
   // @ts-ignore - remove once graphql versions are aligned (see #8753)
-  const { data: searchData, loading: loadingSearch } = useDataQuery<LanesQuery>(GET_LANES, {
+  const { data: searchData, loading: loadingSearch } = useQuery<LanesQueryCompat>(GET_LANES, {
     variables: {
       search,
       skipViewedLane: true,
@@ -280,7 +288,9 @@ export const useSearchLanes: SearchLanes = (search, skip) => {
     loading: loadingSearch,
     lanesModel:
       searchData &&
-      LanesModel.from({ data: { lanes: { ...searchData.lanes, current: undefined, default: undefined } } }),
+      LanesModel.from({
+        data: { lanes: { ...searchData.lanes, current: undefined, default: undefined } } as unknown as LanesQuery,
+      }),
   };
 };
 

components/ui/component-drawer/component-drawer.tsx

@@ -155,7 +155,8 @@ function ComponentsDrawerContent({
 
   const emptyDrawer = <span className={classNames(mutedItalic, ellipsis, styles.emptyDrawer)}>{emptyMessage}</span>;
 
-  const loading = loadingComponents || loadingLanesModel || !lanes || !components;
+  const hasComponents = Array.isArray(components);
+  const loading = loadingComponents || !hasComponents || (components.length === 0 && loadingLanesModel);
 
   if (loading) return <ComponentTreeLoader />;
 

components/ui/side-bar/component-tree/component-view/component-view.tsx

@@ -9,7 +9,7 @@ import classNames from 'classnames';
 import { ComponentID } from '@teambit/component-id';
 import type { ComponentModel } from '@teambit/component';
 import { ComponentUrl } from '@teambit/component.modules.component-url';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext } from 'react';
 import { Tooltip } from '@teambit/design.ui.tooltip';
 import { TreeContext } from '@teambit/base-ui.graph.tree.tree-context';
 import { indentClass } from '@teambit/base-ui.graph.tree.indent';
@@ -33,14 +33,9 @@ export function ComponentView(props: ComponentViewProps) {
   const { onSelect } = useContext(TreeContext);
   const lanesContextModel = useContext(LanesContext);
   const lanesModel = lanesContextModel?.lanesModel;
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    return () => {
-      setMounted(false);
-    };
-  }, []);
+  const hasWindow = typeof window !== 'undefined';
+  const locationOrigin = hasWindow ? window.location.origin : undefined;
+  const isLocalhost = hasWindow ? window.location.host.startsWith('localhost') : false;
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -65,11 +60,11 @@ export function ComponentView(props: ComponentViewProps) {
     ? undefined
     : (isEnvOnCurrentLane &&
         lanesModel?.viewedLane?.id &&
-        mounted &&
-        `${window.location.origin}${LanesModel.getLaneComponentUrl(envId, lanesModel.viewedLane?.id, undefined, lanesModel.viewedLane)}`) ||
+        locationOrigin &&
+        `${locationOrigin}${LanesModel.getLaneComponentUrl(envId, lanesModel.viewedLane?.id, undefined, lanesModel.viewedLane)}`) ||
       ComponentUrl.toUrl(envId, {
         includeVersion: true,
-        useLocationOrigin: mounted ? window.location.host.startsWith('localhost') : false,
+        useLocationOrigin: isLocalhost,
       });
 
   const envTooltip = envId ? (
@@ -99,7 +94,7 @@ export function ComponentView(props: ComponentViewProps) {
   const viewingMainCompOnLane = React.useMemo(() => {
     if (isMissingCompOrEnvId) return false;
     return (
-      !component.status?.isNew &&
+      component.status?.isNew === false &&
       !lanesModel?.viewedLane?.id.isDefault() &&
       lanesModel?.isComponentOnMainButNotOnLane(component.id as any, undefined, lanesModel?.viewedLane?.id)
     );

components/ui/version-dropdown/version-dropdown-placeholder.tsx

@@ -47,7 +47,7 @@ export function SimpleVersion({
       <Ellipsis className={classNames(styles.versionName)} onClick={rest.onClick}>
         {formattedVersion}
       </Ellipsis>
-      {hasMoreVersions && <Icon of="fat-arrow-down" onClick={rest.onClick} />}
+      {hasMoreVersions !== false && <Icon of="fat-arrow-down" onClick={rest.onClick} />}
     </div>
   );
 }
@@ -95,7 +95,7 @@ export function DetailedVersion({
       <Ellipsis className={styles.versionTimestamp} onClick={rest.onClick}>
         <TimeAgo date={timestamp} onClick={rest.onClick} />
       </Ellipsis>
-      {hasMoreVersions && <Icon of="fat-arrow-down" onClick={rest.onClick} />}
+      {hasMoreVersions !== false && <Icon of="fat-arrow-down" onClick={rest.onClick} />}
     </div>
   );
 }

components/ui/version-dropdown/version-dropdown.tsx

@@ -24,6 +24,7 @@ export type UseComponentDropdownVersionsResult = {
 };
 export type UseComponentDropdownVersionsProps = {
   skip?: boolean;
+  fetchLogs?: boolean;
 };
 export type UseComponentDropdownVersions = (
   props?: UseComponentDropdownVersionsProps
@@ -79,8 +80,13 @@ function _VersionDropdown({
   ...rest
 }: VersionDropdownProps) {
   const [key, setKey] = useState(0);
-  const singleVersion = !hasMoreVersions;
+  const singleVersion = hasMoreVersions === false;
   const [open, setOpen] = useState(false);
+  const [prefetchRequested, setPrefetchRequested] = useState(false);
+
+  const requestPrefetch = useCallback(() => {
+    setPrefetchRequested(true);
+  }, []);
 
   useEffect(() => {
     if (loading && open) {
@@ -89,6 +95,7 @@ function _VersionDropdown({
   }, [loading]);
 
   const handlePlaceholderClicked = (e: React.MouseEvent<HTMLDivElement>) => {
+    requestPrefetch();
     if (loading) return;
     if (e.target === e.currentTarget) {
       setOpen((o) => !o);
@@ -128,36 +135,62 @@ function _VersionDropdown({
   }
 
   return (
-    <div {...rest} className={classNames(styles.versionDropdown, className)}>
+    <div
+      {...rest}
+      className={classNames(styles.versionDropdown, className)}
+      onMouseEnter={requestPrefetch}
+      onFocus={requestPrefetch}
+      onPointerDown={requestPrefetch}
+      onTouchStart={requestPrefetch}
+    >
       <Dropdown
         className={classNames(styles.dropdown, dropdownClassName)}
         dropClass={classNames(styles.menu, menuClassName)}
         open={open}
         onClick={handlePlaceholderClicked}
         onClickOutside={() => setOpen(false)}
-        onChange={(_e, _open) => _open && setKey((x) => x + 1)} // to reset menu to initial state when toggling
+        onChange={(_e, _open) => {
+          if (_open) {
+            requestPrefetch();
+            setKey((x) => x + 1);
+          }
+        }} // to reset menu to initial state when toggling
         PlaceholderComponent={({ children, ...other }) => (
-          <div {...other} className={placeholderClassName} onClick={handlePlaceholderClicked}>
+          <div
+            {...other}
+            className={placeholderClassName}
+            onClick={handlePlaceholderClicked}
+            onMouseEnter={requestPrefetch}
+            onFocus={requestPrefetch}
+            onPointerDown={requestPrefetch}
+            onTouchStart={requestPrefetch}
+          >
             {children}
           </div>
         )}
         placeholder={PlaceholderComponent}
       >
-        <VersionMenu
-          className={menuClassName}
-          key={key}
-          currentVersion={currentVersion}
-          latestVersion={latestVersion}
-          localVersion={localVersion}
-          overrideVersionHref={overrideVersionHref}
-          showVersionDetails={showVersionDetails}
-          currentLane={currentLane}
-          getActiveTabIndex={getActiveTabIndex}
-          lanes={lanes}
-          useVersions={useComponentVersions}
-          onVersionClicked={() => setOpen(false)}
-          open={open}
-        />
+        {/* the menu is not mounted until the user shows intent (hover/focus/press/open). versions
+            load lazily, and mounting the menu eagerly would render its rows into the dom for every
+            card in a workspace grid before anyone asked for them. */}
+        {prefetchRequested || open ? (
+          <VersionMenu
+            className={menuClassName}
+            key={key}
+            currentVersion={currentVersion}
+            latestVersion={latestVersion}
+            localVersion={localVersion}
+            overrideVersionHref={overrideVersionHref}
+            showVersionDetails={showVersionDetails}
+            currentLane={currentLane}
+            getActiveTabIndex={getActiveTabIndex}
+            lanes={lanes}
+            useVersions={useComponentVersions}
+            shouldPrefetchVersions={prefetchRequested}
+            onVersionClicked={() => setOpen(false)}
+            open={open}
+          />
+        ) : null}
       </Dropdown>
     </div>
   );
@@ -175,6 +208,7 @@ type VersionMenuProps = {
   loading?: boolean;
   getActiveTabIndex?: GetActiveTabIndex;
   open?: boolean;
+  shouldPrefetchVersions?: boolean;
   onVersionClicked?: () => void;
 } & HTMLAttributes<HTMLDivElement>;
 
@@ -211,11 +245,20 @@ function _VersionMenu({
   getActiveTabIndex = defaultActiveTabIndex,
   loading: loadingFromProps,
   open,
+  shouldPrefetchVersions,
   onVersionClicked,
   ...rest
 }: VersionMenuProps) {
-  const { snaps, tags, loading: loadingVersions } = useVersions?.() || {};
-  const loading = loadingFromProps || loadingVersions;
+  const shouldFetchVersions = !!(open || shouldPrefetchVersions);
+  const {
+    snaps,
+    tags,
+    loading: loadingVersions,
+  } = useVersions?.({
+    skip: !shouldFetchVersions,
+    fetchLogs: shouldFetchVersions,
+  }) || {};
+  const loading = loadingFromProps || (shouldFetchVersions && loadingVersions);
 
   const tabs = useMemo(
     () =>