feat(small): Refactor HrmConnectionPanel and remove unrelated snapshots (#9122)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: arii <342438+arii@users.noreply.github.com>

Author: arii

components/HrmConnectionPanel.tsx

@@ -8,6 +8,54 @@ import { useNow } from '@/hooks/useNow'
 import HrTile from '@/components/HrTile'
 import { getActiveHrmData } from '@/utils/hrm'
 
+const LoadingSkeleton = () => (
+  <>
+    <Box
+      data-testid="hr-tile-grid-item"
+      sx={{
+        width: { xs: '100%', sm: 'calc(50% - 8px)' },
+      }}
+    >
+      <Skeleton variant="rectangular" height={220} sx={{ borderRadius: 3 }} />
+    </Box>
+    <Box
+      data-testid="hr-tile-grid-item"
+      sx={{
+        display: { xs: 'none', md: 'block' },
+        width: { sm: 'calc(50% - 8px)' },
+      }}
+    >
+      <Skeleton variant="rectangular" height={220} sx={{ borderRadius: 3 }} />
+    </Box>
+  </>
+)
+
+const EmptyDataMessage = () => (
+  <Box
+    sx={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%', // Ensure the container fills the grid cell
+      gap: 2,
+      p: 2,
+      border: 1,
+      borderColor: 'divider',
+      borderRadius: 2,
+    }}
+  >
+    <Typography variant="h6" gutterBottom>
+      No Heart Rate Data
+    </Typography>
+    <Typography variant="body1" color="text.secondary" align="center">
+      Heart rate data will be displayed here once a monitor is connected and
+      streaming.
+    </Typography>
+  </Box>
+)
+
 const HrmConnectionPanel = () => {
   const { hrmData, connectionStatus, activeAlerts } = useWebSocket()
   const now = useNow()
@@ -22,6 +70,39 @@ const HrmConnectionPanel = () => {
     connectionStatus === 'Connecting...' ||
     connectionStatus === 'Reconnecting...'
 
+  const renderContent = () => {
+    if (isLoading) {
+      return <LoadingSkeleton />
+    }
+
+    if (tileData.length === 0) {
+      return <EmptyDataMessage />
+    }
+
+    return tileData.map((user) => {
+      // Destructure to remove volatile timestamps causing re-renders
+      const {
+        updatedAt: _updatedAt,
+        lastUpdated: _lastUpdated,
+        ...tileProps
+      } = user
+      return (
+        <Box
+          key={user.clientId}
+          data-testid="hr-tile-grid-item"
+          sx={{
+            width: {
+              xs: '100%',
+              sm: 'calc(50% - 8px)', // Adjusted for 16px gap (gap: 2)
+            },
+          }}
+        >
+          <HrTile {...tileProps} />
+        </Box>
+      )
+    })
+  }
+
   return (
     <Box
       data-testid="hrm-connection-panel"
@@ -32,83 +113,9 @@ const HrmConnectionPanel = () => {
         height: '100%',
       }}
     >
-      {isLoading ? (
-        <>
-          <Box
-            data-testid="hr-tile-grid-item"
-            sx={{
-              width: { xs: '100%', sm: 'calc(50% - 8px)' },
-            }}
-          >
-            <Skeleton
-              variant="rectangular"
-              height={220}
-              sx={{ borderRadius: 3 }}
-            />
-          </Box>
-          <Box
-            data-testid="hr-tile-grid-item"
-            sx={{
-              display: { xs: 'none', md: 'block' },
-              width: { sm: 'calc(50% - 8px)' },
-            }}
-          >
-            <Skeleton
-              variant="rectangular"
-              height={220}
-              sx={{ borderRadius: 3 }}
-            />
-          </Box>
-        </>
-      ) : tileData.length === 0 ? (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: '100%',
-            height: '100%', // Ensure the container fills the grid cell
-            gap: 2,
-            p: 2,
-            border: 1,
-            borderColor: 'divider',
-            borderRadius: 2,
-          }}
-        >
-          <Typography variant="h6" gutterBottom>
-            No Heart Rate Data
-          </Typography>
-          <Typography variant="body1" color="text.secondary" align="center">
-            Heart rate data will be displayed here once a monitor is connected
-            and streaming.
-          </Typography>
-        </Box>
-      ) : (
-        tileData.map((user) => {
-          // Destructure to remove volatile timestamps causing re-renders
-          const {
-            updatedAt: _updatedAt,
-            lastUpdated: _lastUpdated,
-            ...tileProps
-          } = user
-          return (
-            <Box
-              key={user.clientId}
-              data-testid="hr-tile-grid-item"
-              sx={{
-                width: {
-                  xs: '100%',
-                  sm: 'calc(50% - 8px)', // Adjusted for 16px gap (gap: 2)
-                },
-              }}
-            >
-              <HrTile {...tileProps} />
-            </Box>
-          )
-        })
-      )}
+      {renderContent()}
     </Box>
   )
 }
+
 export default HrmConnectionPanel