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

@@ -44,6 +44,11 @@ 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);
 
   const modelCard = useFragment(
     graphql`
@@ -77,29 +82,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 +97,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 +106,21 @@ const ModelCardDrawer: React.FC<ModelCardDrawerProps> = ({
     <>
       <Drawer
         open={open}
-        onClose={onClose}
+        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,7 @@
  @license
  Copyright (c) 2015-2026 Lablup Inc. All rights reserved.
  */
-import { ModelCardDrawerFragment$key } from '../__generated__/ModelCardDrawerFragment.graphql';
+import { ModelStoreListPageV2DrawerQuery } from '../__generated__/ModelStoreListPageV2DrawerQuery.graphql';
 import {
   ModelCardV2Filter,
   ModelStoreListPageV2Query,
@@ -34,6 +34,7 @@ import {
   BAIGraphQLPropertyFilter,
   BAISelect,
   type GraphQLFilter,
+  safeDecodeUuid,
   useUpdatableState,
 } from 'backend.ai-ui';
 import dayjs from 'dayjs';
@@ -43,7 +44,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 +205,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 +217,6 @@ const ModelCardV2Grid: React.FC<{
   offset,
   onTotalChange,
   onCardClick,
-  selectedModelCardId,
-  onSelectedModelCardFound,
 }) => {
   'use memo';
 
@@ -246,7 +243,6 @@ const ModelCardV2Grid: React.FC<{
             node {
               id
               ...ModelStoreListPageV2_ModelCardV2Fragment
-              ...ModelCardDrawerFragment
             }
           }
         }
@@ -276,23 +272,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 +291,7 @@ const ModelCardV2Grid: React.FC<{
             <ModelCardV2Card
               modelCardV2Frgmt={item}
               searchKeyword={searchKeyword}
-              onClick={() => onCardClick?.(item.id, item)}
+              onClick={() => onCardClick?.(item.id)}
             />
           </Col>
         );
@@ -343,9 +322,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 +340,37 @@ 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. Instead we run a separate query
+  // here gated by `useDeferredValue(drawerOpen)`: while no card is selected
+  // (`deferredDrawerOpen` falsy), `fetchPolicy: 'store-only'` keeps the
+  // network quiet and the empty-string `id` is never sent. Same pattern as
+  // `FolderExplorerOpener` → `FolderExplorerModalV2`.
+  const selectedModelCardId = queryParams.modelCard;
+  const drawerOpen = !!selectedModelCardId;
+  const deferredDrawerOpen = useDeferredValue(drawerOpen);
+  const localSelectedModelCardId = selectedModelCardId
+    ? safeDecodeUuid(selectedModelCardId)
+    : undefined;
+  const drawerData = useLazyLoadQuery<ModelStoreListPageV2DrawerQuery>(
+    graphql`
+      query ModelStoreListPageV2DrawerQuery($id: UUID!) {
+        modelCardV2(id: $id) {
+          ...ModelCardDrawerFragment
+        }
+      }
+    `,
+    { id: localSelectedModelCardId ?? '' },
+    {
+      fetchPolicy:
+        deferredDrawerOpen && localSelectedModelCardId
+          ? 'store-and-network'
+          : 'store-only',
+    },
+  );
+
   const isPendingPage =
     deferredLimit !== baiPaginationOption.limit ||
     deferredOffset !== baiPaginationOption.offset;
@@ -481,10 +488,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 +529,9 @@ const ModelStoreListPageV2: React.FC = () => {
       )}
 
       <ModelCardDrawer
-        modelCardDrawerFrgmt={selectedModelCard}
-        open={!!queryParams.modelCard && !!selectedModelCard}
+        modelCardDrawerFrgmt={drawerData.modelCardV2 ?? null}
+        open={drawerOpen}
         onClose={() => {
-          setSelectedModelCard(null);
           setQueryParams({ modelCard: null });
         }}
       />