fix: language filter doesn't cause flicker

libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.spec.tsx

@@ -3,6 +3,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import noop from 'lodash/noop'
 import { NextRouter, useRouter } from 'next/router'
 
+import { setBeaconPageViewed } from '../../../libs/beaconHooks'
 import { getLanguagesMock } from '../data'
 
 import { HeaderAndLanguageFilter } from '.'
@@ -19,6 +20,10 @@ jest.mock('next/router', () => ({
   useRouter: jest.fn(() => ({ query: { tab: 'active' } }))
 }))
 
+jest.mock('../../../libs/beaconHooks', () => ({
+  setBeaconPageViewed: jest.fn()
+}))
+
 const mockedUseRouter = useRouter as jest.MockedFunction<typeof useRouter>
 
 describe('HeaderAndLanguageFilter', () => {
@@ -56,16 +61,11 @@ describe('HeaderAndLanguageFilter', () => {
     fireEvent.click(screen.getByRole('button', { name: 'French Français' }))
     await waitFor(() => expect(onChange).toHaveBeenCalledTimes(2))
     fireEvent.click(screen.getByTestId('PresentationLayer'))
-    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(3))
-    await waitFor(() => {
-      expect(push).toHaveBeenCalledWith(
-        {
-          query: { param: 'template-language' }
-        },
-        undefined,
-        { shallow: true }
-      )
-    })
+    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(2))
+    fireEvent.click(
+      screen.getAllByRole('heading', { name: 'All Languages' })[0]
+    )
+    expect(setBeaconPageViewed).toHaveBeenCalledWith('template-language')
   })
 
   it('should show loading', () => {

libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/HeaderAndLanguageFilter.tsx

@@ -223,13 +223,7 @@ export function HeaderAndLanguageFilter({
   const localButtonProps: LocalButtonProps = {
     loading: loading || selectedLanguageIds == null,
     onClick: () => {
-      const param = 'template-language'
-      void router.push({ query: { ...router.query, param } }, undefined, {
-        shallow: true
-      })
-      router.events.on('routeChangeComplete', () => {
-        setBeaconPageViewed(param)
-      })
+      setBeaconPageViewed('template-language')
       setOpen(!open)
     }
   }

libs/journeys/ui/src/components/TemplateGallery/HeaderAndLanguageFilter/LanguagesFilterPopper/LanguagesFilterPopper.tsx

@@ -60,7 +60,6 @@ export function LanguagesFilterPopper({
           <Box
             data-testid="PresentationLayer"
             onClick={() => {
-              handleSubmit()
               setOpen(!open)
             }}
             sx={{

libs/journeys/ui/src/components/TemplateGallery/TemplateGallery.spec.tsx

@@ -157,8 +157,7 @@ describe('TemplateGallery', () => {
         expect(push).toHaveBeenCalledWith(
           {
             query: {
-              languageIds: [],
-              param: 'template-language'
+              languageIds: ['496']
             }
           },
           undefined,