feat(medium): Fix HRM loading skeleton and revert scope creep (#9102)

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

app/page.tsx

@@ -65,11 +65,6 @@ const Dashboard = () => {
   const [refreshKey, setRefreshKey] = useState(0)
   const { initializeAudio } = useAudio()
 
-  const useNativeTable =
-    process.env.NEXT_PUBLIC_USE_NATIVE_TABLE === 'true' ||
-    (typeof window !== 'undefined' &&
-      window.location.search.includes('use-native-table=true'))
-
   const handleRefresh = () => {
     setRefreshKey((prevKey) => prevKey + 1)
   }
@@ -109,13 +104,8 @@ const Dashboard = () => {
         <HrmConnectionPanel />
       </Box>
       <Box sx={{ width: '100%', mt: 2 }}>
-<<<<<<< HEAD
-        {useNativeTable ? (
-          <WorkoutTableViewer
-=======
         {process.env.NEXT_PUBLIC_USE_NATIVE_TABLE === 'true' ? (
           <WorkoutTableHeader
->>>>>>> origin/leader
             docId={DOC_ID}
             refreshKey={refreshKey}
             onRefresh={handleRefresh}

components/RefreshIconButton.tsx

@@ -1,38 +1,11 @@
 import RefreshIcon from '@mui/icons-material/Refresh'
 import { IconButton, IconButtonProps } from '@mui/material'
 import { alpha } from '@mui/material/styles'
-import { memo } from 'react'
 
 interface RefreshIconButtonProps extends IconButtonProps {
   onClick: () => void
 }
 
-<<<<<<< HEAD
-const RefreshIconButton = ({ onClick, ...props }: RefreshIconButtonProps) => {
-  return (
-    <IconButton
-      data-testid="refresh-icon-button"
-      onClick={onClick}
-      sx={(theme) => ({
-        position: 'absolute',
-        top: 8,
-        right: 8,
-        width: 48,
-        height: 48,
-        zIndex: 10,
-        backgroundColor: alpha(theme.palette.background.paper, 0.7),
-        backdropFilter: 'blur(4px)',
-        '&:hover': {
-          backgroundColor: alpha(theme.palette.background.paper, 0.9),
-        },
-      })}
-      {...props}
-    >
-      <RefreshIcon fontSize="small" />
-    </IconButton>
-  )
-}
-=======
 const RefreshIconButton = ({ onClick, ...props }: RefreshIconButtonProps) => (
   <IconButton
     onClick={onClick}
@@ -54,6 +27,5 @@ const RefreshIconButton = ({ onClick, ...props }: RefreshIconButtonProps) => (
     <RefreshIcon fontSize="small" />
   </IconButton>
 )
->>>>>>> origin/leader
 
-export default memo(RefreshIconButton)
+export default RefreshIconButton

tests/playwright/stale-tile.spec.ts

@@ -5,14 +5,7 @@ test('should remove tile immediately when missing from HRM_UPDATE', async ({
   page,
 }) => {
   await page.goto('/?testing=true')
-<<<<<<< HEAD
-  await page.waitForSelector('main, body > div', {
-    state: 'visible',
-    timeout: 15000,
-  })
-=======
   await page.waitForSelector('[data-testid="dashboard"]', { timeout: 15000 })
->>>>>>> origin/leader
 
   // Helper to dispatch messages to the reducer
   const dispatch = async (message: ServerMessage | { type: 'RESET_STATE' }) => {

tests/playwright/vrt-components.spec.ts

@@ -48,32 +48,9 @@ test.describe('Component-Specific VRT', () => {
     await takeScreenshot(viewer, 'google-doc-viewer-shrunk.png')
   })
 
-<<<<<<< HEAD
-  test('WorkoutTableViewer rendering', async ({ dashboardPage }) => {
-    // Mock the workout API to return headers
-    await dashboardPage.route('**/api/workout?docId=**', async (route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          headers: ['Exercise Name', 'Sets', 'Reps', 'Notes'],
-          rows: [],
-        }),
-      })
-    })
-
-    // Navigate to dashboard and force native table via query param
-    await dashboardPage.goto('/?testing=true&use-native-table=true')
-    await waitForPageReady(dashboardPage)
-
-    const tableHeader = dashboardPage.getByTestId('workout-table-viewer')
-    await expect(tableHeader).toBeVisible()
-    await takeScreenshot(tableHeader, 'workout-table-viewer.png')
-=======
   test.skip('WorkoutTableHeader rendering', async () => {
     // Requires NEXT_PUBLIC_USE_NATIVE_TABLE=true which is a build-time/env-var.
     // Skipping for now as it requires complex environment setup.
->>>>>>> origin/leader
   })
 
   test('SpotifyDeviceSelector menu', async ({ dashboardPage, context }) => {