refactor(common): extract shared LoadingCard component

src/components/common/LoadingCard.tsx

@@ -0,0 +1,21 @@
+import {
+  Card,
+  CircularProgress,
+  type SxProps,
+  type Theme,
+} from '@mui/material';
+import type React from 'react';
+
+interface LoadingCardProps {
+  size?: number;
+  sx?: SxProps<Theme>;
+}
+
+export const LoadingCard: React.FC<LoadingCardProps> = ({ size = 40, sx }) => (
+  <Card
+    sx={[{ p: 4, textAlign: 'center' }, ...(Array.isArray(sx) ? sx : [sx])]}
+    elevation={0}
+  >
+    <CircularProgress size={size} sx={{ color: 'primary.main' }} />
+  </Card>
+);

src/components/common/index.ts

@@ -1,5 +1,6 @@
 export * from './ChartEmptyPanel';
 export * from './ClearSearchAdornment';
+export * from './LoadingCard';
 export * from './linkBehavior';
 export * from './WatchlistButton';
 export * from './DataTable';

src/components/miners/MinerIdentityRail.tsx

@@ -6,7 +6,6 @@ import {
   ButtonBase,
   Card,
   Chip,
-  CircularProgress,
   Stack,
   Typography,
 } from '@mui/material';
@@ -27,6 +26,7 @@ import {
 import { useClipboardCopy } from '../../hooks/useClipboardCopy';
 import { STATUS_COLORS } from '../../theme';
 import { getRepositoryOwnerAvatarSrc } from '../../utils/avatar';
+import { LoadingCard } from '../common';
 import MinerInsightsCard from './MinerInsightsCard';
 
 type ViewMode = 'prs' | 'issues';
@@ -237,11 +237,7 @@ const MinerIdentityRail: React.FC<MinerIdentityRailProps> = ({
   }, [minerStats]);
 
   if (isLoading) {
-    return (
-      <Card sx={{ p: 4, textAlign: 'center' }} elevation={0}>
-        <CircularProgress size={32} sx={{ color: 'primary.main' }} />
-      </Card>
-    );
+    return <LoadingCard size={32} />;
   }
 
   if (error || !minerStats || !summary) {

src/components/miners/MinerOpenDiscoveryIssuesByRepo.tsx

@@ -3,7 +3,6 @@ import {
   Avatar,
   Box,
   Card,
-  CircularProgress,
   InputAdornment,
   TextField,
   Tooltip,
@@ -27,6 +26,7 @@ import {
 } from '../../components/common/DataTable';
 import FilterButton from '../FilterButton';
 import { ClearSearchAdornment } from '../common/ClearSearchAdornment';
+import { LoadingCard } from '../common/LoadingCard';
 import TablePagination from '../common/TablePagination';
 import { tooltipSlotProps } from '../../theme';
 
@@ -365,11 +365,7 @@ const MinerOpenDiscoveryIssuesByRepo: React.FC<
   ];
 
   if (isLoading) {
-    return (
-      <Card sx={{ p: 4, textAlign: 'center' }} elevation={0}>
-        <CircularProgress size={40} sx={{ color: 'primary.main' }} />
-      </Card>
-    );
+    return <LoadingCard />;
   }
 
   const headerToolbar = (

src/components/miners/MinerPRsTable.tsx

@@ -10,7 +10,6 @@ import {
   Box,
   Card,
   Chip,
-  CircularProgress,
   Collapse,
   InputAdornment,
   TextField,
@@ -41,7 +40,7 @@ import {
 import FilterButton from '../FilterButton';
 import { ClearSearchAdornment } from '../common/ClearSearchAdornment';
 import { DebouncedSearchInput } from '../common/DebouncedSearchInput';
-import { WatchlistButton } from '../../components/common';
+import { LoadingCard, WatchlistButton } from '../../components/common';
 import {
   comparePRsByWatchlist,
   serializePRKey,
@@ -506,11 +505,7 @@ const MinerPRsTable: React.FC<MinerPRsTableProps> = ({ githubId }) => {
   ];
 
   if (isLoading) {
-    return (
-      <Card sx={{ p: 4, textAlign: 'center' }} elevation={0}>
-        <CircularProgress size={40} sx={{ color: 'primary.main' }} />
-      </Card>
-    );
+    return <LoadingCard />;
   }
 
   const headerToolbar = (

src/components/prs/PRDetailsCard.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
-import {
-  Card,
-  Box,
-  Typography,
-  CircularProgress,
-  Avatar,
-  alpha,
-  Tooltip,
-} from '@mui/material';
+import { Card, Box, Typography, Avatar, alpha, Tooltip } from '@mui/material';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ReactECharts from 'echarts-for-react';
 import { usePullRequestDetails } from '../../api';
+import { LoadingCard } from '../common';
 import { linkResetSx, useLinkBehavior } from '../common/linkBehavior';
 import theme, {
   CHART_COLORS,
@@ -43,19 +36,14 @@ const PRDetailsCard: React.FC<PRDetailsCardProps> = ({
   );
   if (isDetailsLoading) {
     return (
-      <Card
+      <LoadingCard
         sx={{
           backgroundColor: alpha(theme.palette.common.white, 0.02),
           borderRadius: '8px',
           border: '1px solid',
           borderColor: 'border.subtle',
-          p: 4,
-          textAlign: 'center',
         }}
-        elevation={0}
-      >
-        <CircularProgress size={40} sx={{ color: 'primary.main' }} />
-      </Card>
+      />
     );
   }