Implemented skeleton from chakra ui

frontend/__tests__/src/pages/Chapters.test.tsx

@@ -35,11 +35,11 @@ describe('ChaptersPage Component', () => {
     jest.clearAllMocks()
   })
 
-  test('renders loading spinner initially', async () => {
+  test('renders skeleton initially', async () => {
     render(<ChaptersPage />)
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
     })
   })
 
@@ -86,9 +86,9 @@ describe('ChaptersPage Component', () => {
     })
     render(<ChaptersPage />)
 
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
+    const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
       expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
     })
     await waitFor(() => {
@@ -97,7 +97,7 @@ describe('ChaptersPage Component', () => {
       expect(screen.getByText('Next Page')).toBeInTheDocument()
     })
 
-    expect(screen.queryByAltText('Loading indicator')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('skeleton-loader')).not.toBeInTheDocument()
   })
   test('opens  window on View Details button click', async () => {
     const navigateMock = jest.fn()

frontend/__tests__/src/pages/CommitteeDetails.test.tsx

@@ -35,11 +35,11 @@ describe('Committees Component', () => {
     jest.clearAllMocks()
   })
 
-  test('renders loading spinner initially', async () => {
+  test('renders skeleton initially', async () => {
     render(<CommitteeDetailsPage />)
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
     })
   })
 

frontend/__tests__/src/pages/Committees.test.tsx

@@ -36,11 +36,11 @@ describe('Committees Component', () => {
     jest.clearAllMocks()
   })
 
-  test('renders loading spinner initially', async () => {
+  test('renders skeleton initially', async () => {
     render(<CommitteesPage />)
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
     })
   })
 
@@ -53,19 +53,16 @@ describe('Committees Component', () => {
 
     render(<CommitteesPage />)
 
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
-
-      expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('skeleton-loader')).not.toBeInTheDocument()
     })
 
     await waitFor(() => {
       expect(screen.getByPlaceholderText('Search for OWASP committees...')).toBeInTheDocument()
       expect(screen.getByText('Committee 1')).toBeInTheDocument()
       expect(screen.getByText('Next Page')).toBeInTheDocument()
     })
-    expect(screen.queryByAltText('Loading indicator')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('skeleton-loader')).not.toBeInTheDocument()
   })
 
   test('renders committee data correctly', async () => {

frontend/__tests__/src/pages/Contribute.test.tsx

@@ -1,7 +1,6 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import { fetchAlgoliaData } from 'api/fetchAlgoliaData'
-import { MemoryRouter } from 'react-router-dom'
+import { render } from 'wrappers/testUtil'
 
 import ContributePage from 'pages/Contribute'
 
@@ -30,15 +29,11 @@ describe('Contribute Component', () => {
     jest.clearAllMocks()
   })
 
-  test('renders loading spinner initially', async () => {
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
+  test('renders skeleton initially', async () => {
+    render(<ContributePage />)
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
     })
   })
 
@@ -48,11 +43,7 @@ describe('Contribute Component', () => {
       hits: mockContributeData.issues,
       totalPages: 1,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
 
     await waitFor(() => {
       expect(screen.getByText('Contribution 1')).toBeInTheDocument()
@@ -68,11 +59,7 @@ describe('Contribute Component', () => {
       issues: [],
       totalPages: 0,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
     await waitFor(() => {
       expect(screen.getByText('No issues found')).toBeInTheDocument()
     })
@@ -85,11 +72,7 @@ describe('Contribute Component', () => {
       hits: mockContributeData.issues,
       totalPages: 4,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
     await waitFor(() => {
       const nextPageButton = screen.getByText('Next Page')
       fireEvent.click(nextPageButton)
@@ -105,11 +88,7 @@ describe('Contribute Component', () => {
       totalPages: 2,
       currentPage: 1,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
     await waitFor(() => {
       expect(screen.getByText('Next Page')).toBeInTheDocument()
     })
@@ -121,11 +100,7 @@ describe('Contribute Component', () => {
       totalPages: 2,
       currentPage: 2,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
     await waitFor(() => {
       expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
     })
@@ -136,29 +111,21 @@ describe('Contribute Component', () => {
       ...mockContributeData,
       total_pages: 1,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
     await waitFor(() => {
       expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
     })
   })
 
   test('handles search functionality', async () => {
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
 
     await waitFor(() => {
       const searchInput = screen.getByPlaceholderText('Search for OWASP issues...')
       fireEvent.change(searchInput, { target: { value: '' } })
     })
 
-    expect(fetchAlgoliaData).toHaveBeenCalledWith('issues', '', 1)
+    expect(fetchAlgoliaData).toHaveBeenCalledWith('issues', '', 2)
   })
 
   test('handles error states in card rendering', async () => {
@@ -174,11 +141,7 @@ describe('Contribute Component', () => {
     }
     ;(fetchAlgoliaData as jest.Mock).mockResolvedValue(mockErrorIssue)
 
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
 
     await waitFor(() => {
       expect(screen.queryByText('Read More')).not.toBeInTheDocument()
@@ -191,11 +154,7 @@ describe('Contribute Component', () => {
       hits: mockContributeData.issues,
       totalPages: 1,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
 
     await waitFor(() => {
       const readMoreButton = screen.getByText('Read More')
@@ -209,11 +168,7 @@ describe('Contribute Component', () => {
       hits: mockContributeData.issues,
       totalPages: 1,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
 
     await waitFor(() => {
       const readMoreButton = screen.getByText('Read More')
@@ -232,11 +187,7 @@ describe('Contribute Component', () => {
       hits: mockContributeData.issues,
       totalPages: 1,
     })
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
 
     await waitFor(() => {
       const readMoreButton = screen.getByText('Read More')
@@ -264,11 +215,7 @@ describe('Contribute Component', () => {
     }
     ;(fetchAlgoliaData as jest.Mock).mockResolvedValue(mockMultipleIssues)
 
-    render(
-      <MemoryRouter>
-        <ContributePage />
-      </MemoryRouter>
-    )
+    render(<ContributePage />)
 
     // Wait for both cards to be rendered
     await waitFor(() => {

frontend/__tests__/src/pages/Projects.test.tsx

@@ -35,11 +35,11 @@ describe('ProjectPage Component', () => {
     jest.clearAllMocks()
   })
 
-  test('renders loading spinner initially', async () => {
+  test('renders skeleton initially', async () => {
     render(<ProjectsPage />)
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
     })
   })
 
@@ -52,9 +52,9 @@ describe('ProjectPage Component', () => {
 
     render(<ProjectsPage />)
 
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
+    const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
       expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
     })
     await waitFor(() => {
@@ -63,7 +63,7 @@ describe('ProjectPage Component', () => {
       expect(screen.getByText('Next Page')).toBeInTheDocument()
     })
 
-    expect(screen.queryByAltText('Loading indicator')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('skeleton-loader')).not.toBeInTheDocument()
   })
 
   test('renders project data correctly', async () => {

frontend/__tests__/src/pages/Users.test.tsx

@@ -39,11 +39,11 @@ describe('UsersPage Component', () => {
     jest.clearAllMocks()
   })
 
-  test('renders loading spinner initially', async () => {
+  test('renders skeleton initially', async () => {
     render(<UsersPage />)
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
     })
   })
 
@@ -52,9 +52,9 @@ describe('UsersPage Component', () => {
     render(<UsersPage />)
 
     // Check loading state
-    const loadingSpinner = screen.getAllByAltText('Loading indicator')
+    const skeletonLoaders = screen.getAllByTestId('skeleton-loader')
     await waitFor(() => {
-      expect(loadingSpinner.length).toBeGreaterThan(0)
+      expect(skeletonLoaders.length).toBeGreaterThan(0)
       expect(screen.queryByText('Next Page')).not.toBeInTheDocument()
     })
 
@@ -65,7 +65,7 @@ describe('UsersPage Component', () => {
       expect(screen.getByText('Next Page')).toBeInTheDocument()
     })
 
-    expect(screen.queryByAltText('Loading indicator')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('skeleton-loader')).not.toBeInTheDocument()
   })
 
   test('renders user cards correctly', async () => {

frontend/src/components/SearchPageLayout.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
-import LoadingSpinner from 'components/LoadingSpinner'
 import Pagination from 'components/Pagination'
 import SearchBar from 'components/Search'
+import SkeletonBase from 'components/SkeletonsBase'
 
 interface SearchPageLayoutProps {
   isLoaded: boolean
@@ -52,9 +52,7 @@ const SearchPageLayout = ({
         />
       </div>
       {!isSearchBarReady || !isLoaded ? (
-        <div className="mt-20 flex h-64 w-full items-center justify-center">
-          <LoadingSpinner imageUrl={loadingImageUrl} />
-        </div>
+        <SkeletonBase indexName={indexName} loadingImageUrl={loadingImageUrl} />
       ) : (
         <>
           <div>