fix(FR-2869): lazy-load model card drawer details to speed up ModelStoreListPageV2

Author: agatha197

react/src/components/ModelCardDeployModal.tsx

@@ -47,7 +47,6 @@ interface AvailablePreset {
   readonly id: string;
   readonly name: string;
   readonly description: string | null;
-  readonly rank: number;
   readonly runtimeVariantId: string;
   readonly ' $fragmentSpreads': FragmentRefs<'DeploymentPresetDetailContentFragment'>;
 }
@@ -392,7 +391,8 @@ const ModelCardDeployModal: React.FC<ModelCardDeployModalProps> = ({
   // Deploy. The content component suspends on its data query, then decides
   // whether to render the selection modal or auto-deploy silently — for the
   // auto-deploy path no modal is ever rendered, so the user goes directly
-  // from the Deploy button to the serving detail page without a flash.
+  // from the Deploy button to the new deployment detail page
+  // (`/deployments/${deploymentId}`) without a flash.
   if (!open) {
     return null;
   }

react/src/components/ModelCardDrawer.tsx

@@ -3,6 +3,7 @@
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
 import { ModelCardDrawerFragment$key } from '../__generated__/ModelCardDrawerFragment.graphql';
+import { ModelCardDrawerQuery } from '../__generated__/ModelCardDrawerQuery.graphql';
 import { useBackendAIImageMetaData } from '../hooks';
 import DeploymentSettingModal from './DeploymentSettingModal';
 import ErrorBoundaryWithNullFallback from './ErrorBoundaryWithNullFallback';
@@ -24,18 +25,18 @@ import {
 import dayjs from 'dayjs';
 import * as _ from 'lodash-es';
 import Markdown from 'markdown-to-jsx';
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, useDeferredValue, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { graphql, useFragment } from 'react-relay';
+import { graphql, useFragment, useLazyLoadQuery } from 'react-relay';
 
 interface ModelCardDrawerProps {
-  modelCardDrawerFrgmt: ModelCardDrawerFragment$key | null;
+  modelCardId: string | undefined;
   open: boolean;
   onClose: () => void;
 }
 
 const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
-  modelCardDrawerFrgmt,
+  modelCardId,
   open,
   onClose,
 }) => {
@@ -44,6 +45,41 @@ const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
   const { t } = useTranslation();
   const [imageMetaData] = useBackendAIImageMetaData();
   const { generateFolderPath } = useFolderExplorerOpener();
+  const [deployModalOpen, setDeployModalOpen] = useState(false);
+  const [
+    isCreateDeploymentOpen,
+    { toggle: toggleCreateDeployment, setLeft: closeCreateDeployment },
+  ] = useToggle(false);
+
+  // Defer `open` so the lazy query only fires once the drawer has actually
+  // committed to opening. `loading={deferredOpen !== open}` then lets the
+  // drawer show its built-in skeleton during the transition instead of an
+  // inner Suspense fallback (FR-2869 review).
+  const deferredOpen = useDeferredValue(open);
+
+  const drawerData = useLazyLoadQuery<ModelCardDrawerQuery>(
+    graphql`
+      query ModelCardDrawerQuery($id: UUID!) {
+        modelCardV2(id: $id) {
+          ...ModelCardDrawerFragment
+        }
+      }
+    `,
+    { id: modelCardId ?? '' },
+    {
+      // Skip the network round-trip until the drawer has actually committed
+      // to opening and a model-card UUID is known. The empty-string fallback
+      // for `id` is never sent in that case because `store-only` short-
+      // circuits the fetch.
+      fetchPolicy:
+        deferredOpen && open && modelCardId
+          ? 'store-and-network'
+          : 'store-only',
+    },
+  );
+
+  const modelCardDrawerFrgmt: ModelCardDrawerFragment$key | null =
+    drawerData.modelCardV2 ?? null;
 
   const modelCard = useFragment(
     graphql`
@@ -77,29 +113,12 @@ const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
           ...VFolderNodeIdenticonV2Fragment
         }
         availablePresets(orderBy: [{ field: RANK, direction: "ASC" }]) {
-          count
           edges {
             node {
               id
               name
               description
-              rank
               runtimeVariantId
-              runtimeVariant {
-                name
-              }
-              execution {
-                imageId
-                startupCommand
-              }
-              cluster {
-                clusterMode
-                clusterSize
-              }
-              deploymentDefaults {
-                openToPublic
-                replicaCount
-              }
               ...DeploymentPresetDetailContentFragment
             }
           }
@@ -109,13 +128,6 @@ const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
     modelCardDrawerFrgmt,
   );
 
-  const [deployModalOpen, setDeployModalOpen] = useState(false);
-  // FR-2862 — when the user hits the empty-preset state in
-  // ModelCardDeployModal, escalate to the deployment shell creation modal
-  // (`DeploymentSettingModal`), same as the `/deployments` page entry.
-  const [isCreateDeploymentOpen, { toggle: toggleCreateDeployment }] =
-    useToggle(false);
-
   const presets =
     modelCard?.availablePresets?.edges
       ?.map((e) => e?.node)
@@ -125,12 +137,22 @@ const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
     <>
       <Drawer
         open={open}
-        onClose={onClose}
+        loading={deferredOpen !== open}
+        onClose={() => {
+          setDeployModalOpen(false);
+          closeCreateDeployment();
+          onClose();
+        }}
         destroyOnHidden
         placement="right"
         size={800}
         title={
-          <BAIFlex direction="row" align="center" gap="xs">
+          <BAIFlex
+            direction="row"
+            align="center"
+            gap="xs"
+            style={{ flex: 1, minWidth: 0 }}
+          >
             <ModelBrandIcon modelName={modelCard?.name ?? ''} />
             <Typography.Text strong ellipsis>
               {modelCard?.metadata?.title || modelCard?.name}

react/src/components/VFolderDeployModal.tsx

@@ -195,7 +195,8 @@ const VFolderDeployModalContent: React.FC<VFolderDeployModalContentProps> = ({
 
   // Auto-deploy on mount when there's exactly one preset and one resource
   // group — same shortcut as ModelCardDeployModal. No modal is rendered;
-  // the user goes straight from the trigger to the serving detail page.
+  // the user goes straight from the trigger to the new deployment detail
+  // page (`/deployments/${deploymentId}`).
   const isAutoDeployScenario =
     availablePresets.length === 1 && resourceGroups.length === 1;
 
@@ -453,8 +454,8 @@ const VFolderDeployModal: React.FC<VFolderDeployModalProps> = ({
   // opened it. The content component suspends on its data query, then
   // decides whether to render the selection modal or auto-deploy silently —
   // for the auto-deploy path no modal is ever rendered, so the user goes
-  // directly from clicking Start Service to the serving detail page without
-  // a flash.
+  // directly from clicking Start Service to the new deployment detail page
+  // (`/deployments/${deploymentId}`) without a flash.
   if (!open) {
     return null;
   }

react/src/pages/ModelStoreListPageV2.tsx

@@ -2,7 +2,6 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
-import { ModelCardDrawerFragment$key } from '../__generated__/ModelCardDrawerFragment.graphql';
 import {
   ModelCardV2Filter,
   ModelStoreListPageV2Query,
@@ -34,6 +33,7 @@ import {
   BAIGraphQLPropertyFilter,
   BAISelect,
   type GraphQLFilter,
+  safeDecodeUuid,
   useUpdatableState,
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
@@ -43,7 +43,7 @@ import {
   parseAsStringLiteral,
   useQueryStates,
 } from 'nuqs';
-import React, { useDeferredValue, useEffectEvent, useState } from 'react';
+import React, { useDeferredValue, useEffectEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { graphql, useFragment, useLazyLoadQuery } from 'react-relay';
 
@@ -204,9 +204,7 @@ const ModelCardV2Grid: React.FC<{
   pageSize: number;
   offset: number;
   onTotalChange: (total: number) => void;
-  onCardClick?: (id: string, frgmt: ModelCardDrawerFragment$key) => void;
-  selectedModelCardId?: string | null;
-  onSelectedModelCardFound?: (frgmt: ModelCardDrawerFragment$key) => void;
+  onCardClick?: (id: string) => void;
 }> = ({
   projectId,
   filter,
@@ -218,8 +216,6 @@ const ModelCardV2Grid: React.FC<{
   offset,
   onTotalChange,
   onCardClick,
-  selectedModelCardId,
-  onSelectedModelCardFound,
 }) => {
   'use memo';
 
@@ -246,7 +242,6 @@ const ModelCardV2Grid: React.FC<{
             node {
               id
               ...ModelStoreListPageV2_ModelCardV2Fragment
-              ...ModelCardDrawerFragment
             }
           }
         }
@@ -276,23 +271,6 @@ const ModelCardV2Grid: React.FC<{
     onTotalChanged();
   }, [total]);
 
-  // When items load and a selectedModelCardId is set (e.g. after refresh),
-  // find the matching fragment and report it to the parent.
-  const onResolveSelectedModelCard = useEffectEvent(() => {
-    if (selectedModelCardId) {
-      const match = items.find(
-        (edge) => edge?.node?.id === selectedModelCardId,
-      );
-      if (match?.node) {
-        onSelectedModelCardFound?.(match.node);
-      }
-    }
-  });
-
-  React.useEffect(() => {
-    onResolveSelectedModelCard();
-  }, [selectedModelCardId, result]);
-
   if (items.length === 0) {
     return (
       <Empty
@@ -312,7 +290,7 @@ const ModelCardV2Grid: React.FC<{
             <ModelCardV2Card
               modelCardV2Frgmt={item}
               searchKeyword={searchKeyword}
-              onClick={() => onCardClick?.(item.id, item)}
+              onClick={() => onCardClick?.(item.id)}
             />
           </Col>
         );
@@ -343,9 +321,6 @@ const ModelStoreListPageV2: React.FC = () => {
     queryParams.sort,
   );
 
-  const [selectedModelCard, setSelectedModelCard] =
-    useState<ModelCardDrawerFragment$key | null>(null);
-
   const filter: GraphQLFilter | undefined = queryParams.filter ?? undefined;
   const deferredFilter = useDeferredValue(filter);
   const deferredSortField = useDeferredValue(sortField);
@@ -364,6 +339,18 @@ const ModelStoreListPageV2: React.FC = () => {
   const deferredLimit = useDeferredValue(baiPaginationOption.limit);
   const deferredOffset = useDeferredValue(baiPaginationOption.offset);
 
+  // Drawer data is intentionally NOT fetched as part of the main list query
+  // — the per-card drawer fragment (readme, all presets, vfolder metadata)
+  // is heavy, and including it via `...ModelCardDrawerFragment` on every
+  // edge multiplies the list-page payload. `ModelCardDrawer` owns its own
+  // query and gates the fetch on `useDeferredValue(open)` so the network
+  // only kicks in once the drawer actually commits to opening.
+  const selectedModelCardId = queryParams.modelCard;
+  const drawerOpen = !!selectedModelCardId;
+  const localSelectedModelCardId = selectedModelCardId
+    ? safeDecodeUuid(selectedModelCardId)
+    : undefined;
+
   const isPendingPage =
     deferredLimit !== baiPaginationOption.limit ||
     deferredOffset !== baiPaginationOption.offset;
@@ -481,10 +468,7 @@ const ModelStoreListPageV2: React.FC = () => {
           pageSize={deferredLimit}
           offset={deferredOffset}
           onTotalChange={setTotal}
-          selectedModelCardId={queryParams.modelCard}
-          onSelectedModelCardFound={(frgmt) => setSelectedModelCard(frgmt)}
-          onCardClick={(id, frgmt) => {
-            setSelectedModelCard(frgmt);
+          onCardClick={(id) => {
             setQueryParams({ modelCard: id });
           }}
         />
@@ -525,10 +509,9 @@ const ModelStoreListPageV2: React.FC = () => {
       )}
 
       <ModelCardDrawer
-        modelCardDrawerFrgmt={selectedModelCard}
-        open={!!queryParams.modelCard && !!selectedModelCard}
+        modelCardId={localSelectedModelCardId}
+        open={drawerOpen}
         onClose={() => {
-          setSelectedModelCard(null);
           setQueryParams({ modelCard: null });
         }}
       />