fix: reduce Percy flake (#25185)

* fix: try to fix Percy flake [run ci]

* empty commit because Percy

Author: astone123

packages/app/cypress/e2e/runner/support/snapshot-reporter.ts

@@ -13,6 +13,14 @@ export const snapshotReporter = () => {
       '[data-cy=reporter-panel]': ($el) => {
         $el.attr('style', 'width: 450px !important')
       },
+      '[data-cy=reporter-running-icon]': ($el) => {
+        // remove 'fa-spin' class so that the icon is not animated
+        $el.attr('class', '')
+      },
+      '.command-progress': ($el) => {
+        // don't display command progress bar in snapshot
+        $el.attr('style', 'display: none !important')
+      },
     },
   })
 }

packages/launchpad/cypress/e2e/migration.cy.ts

@@ -170,6 +170,9 @@ describe('Opening unmigrated project', () => {
     cy.contains(cy.i18n.majorVersionWelcome.title).should('not.exist')
     cy.contains('h1', `Migrating to Cypress ${Cypress.version.split('.')[0]}`).should('be.visible')
 
+    // Wait for migration prompt to load before taking a snapshot
+    cy.get('.spinner').should('not.exist')
+
     cy.percySnapshot()
   })
 })

packages/reporter/src/commands/command.tsx

@@ -79,7 +79,7 @@ const shouldShowCount = (aliasesWithDuplicates: Array<Alias> | null, aliasName:
 const NavColumns = observer(({ model, isPinned, toggleColumnPin }) => (
   <>
     <div className='command-number-column' onClick={toggleColumnPin}>
-      {model._isPending() && <RunningIcon className='fa-spin' />}
+      {model._isPending() && <RunningIcon data-cy="reporter-running-icon" className='fa-spin' />}
       {(!model._isPending() && isPinned) && <PinIcon className='command-pin' />}
       {(!model._isPending() && !isPinned) && model.number}
     </div>