From e6352775ff02491eff76858277c3c3d09122d9c9 Mon Sep 17 00:00:00 2001
From: fansilas <heymysilas@gmail.com>
Date: Mon, 25 May 2026 18:27:17 +0000
Subject: [PATCH] refactor(common): extract shared LoadingCard component

---
 src/components/common/LoadingCard.tsx         | 21 +++++++++++++++++++
 src/components/common/index.ts                |  1 +
 src/components/miners/MinerIdentityRail.tsx   |  8 ++-----
 .../miners/MinerOpenDiscoveryIssuesByRepo.tsx |  8 ++-----
 src/components/miners/MinerPRsTable.tsx       |  9 ++------
 src/components/prs/PRDetailsCard.tsx          | 20 ++++--------------
 6 files changed, 32 insertions(+), 35 deletions(-)
 create mode 100644 src/components/common/LoadingCard.tsx

diff --git a/src/components/common/LoadingCard.tsx b/src/components/common/LoadingCard.tsx
new file mode 100644
index 00000000..e25e6e40
--- /dev/null
+++ b/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>
+);
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 81a26298..85cb7758 100644
--- a/src/components/common/index.ts
+++ b/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';
diff --git a/src/components/miners/MinerIdentityRail.tsx b/src/components/miners/MinerIdentityRail.tsx
index 1ee10760..6c91fcb1 100644
--- a/src/components/miners/MinerIdentityRail.tsx
+++ b/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) {
diff --git a/src/components/miners/MinerOpenDiscoveryIssuesByRepo.tsx b/src/components/miners/MinerOpenDiscoveryIssuesByRepo.tsx
index 7cd3a403..b54a37c4 100644
--- a/src/components/miners/MinerOpenDiscoveryIssuesByRepo.tsx
+++ b/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 = (
diff --git a/src/components/miners/MinerPRsTable.tsx b/src/components/miners/MinerPRsTable.tsx
index 37ca8d02..bc29b396 100644
--- a/src/components/miners/MinerPRsTable.tsx
+++ b/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 = (
diff --git a/src/components/prs/PRDetailsCard.tsx b/src/components/prs/PRDetailsCard.tsx
index 0beab742..f29e1fc5 100644
--- a/src/components/prs/PRDetailsCard.tsx
+++ b/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>
+      />
     );
   }