reverted EmptySearchResult, copied newest develop branch, formatted S…

src/__tests__/screens/SearchResultsScreen.test.tsx

@@ -37,6 +37,7 @@ describe('Search Results Screen', () => {
         expect(headerText).toBeInTheDocument();
         expect(within(headerText).getByText('iron man')).toBeInTheDocument();
     });
+
     it('empty search results displayed when no data is returned', async () => {
         vi.mocked(useTrendingShows).mockReturnValue({
             trendingShows: TRENDING_DATA,
@@ -63,6 +64,7 @@ describe('Search Results Screen', () => {
         const button = screen.getByRole('button', { name: 'Return Home' });
         expect(button).toHaveTextContent('Return Home');
     });
+
     it('search results gallery displayed when data is returned', async () => {
         vi.mocked(usePaginatedData).mockReturnValue({
             data: TRENDING_DATA,
@@ -78,22 +80,5 @@ describe('Search Results Screen', () => {
         const headerText = screen.getByText('Search results for:');
         expect(headerText).toBeInTheDocument();
         expect(within(headerText).getByText('iron man')).toBeInTheDocument();
-        expect(screen.getByText('Load More')).toBeInTheDocument();
-        expect(screen.getByText('Load More')).toHaveAttribute('disabled');
-    });
-    it('a clickable "Load More" button is displayed when `moreToFetch` is true', async () => {
-        vi.mocked(usePaginatedData).mockReturnValue({
-            data: TRENDING_DATA,
-            setData: () => {},
-            loading: false,
-            moreToFetch: true,
-            refetch: () => {},
-        });
-
-        render(<RouterProvider router={router} />);
-
-        await screen.findByTestId('search-results-screen');
-        expect(screen.getByText('Load More')).toBeInTheDocument();
-        expect(screen.getByText('Load More')).not.toHaveAttribute('disabled');
     });
 });

src/components/LoadingIndicator.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const LoadingIndicator: React.FC = () => {
+    return (
+        <div className='flex items-center justify-center mb-4 mt-4'>
+            <div className='w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin'></div>
+        </div>
+    );
+};
+
+export default LoadingIndicator;

src/screens/search_results/SearchResultsScreen.tsx

@@ -1,11 +1,12 @@
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { useLoaderData } from 'react-router-dom';
-import React, { useState, useEffect, useMemo } from 'react';
-import { Button, EmptySearchResults, OfflineSnackbar } from '../../components';
+import { EmptySearchResults, OfflineSnackbar } from '../../components';
 import { usePaginatedData, useProfileContext, useWindowSize } from '../../hooks';
 import Logger from '../../logger';
 import SearchResultCards from './SearchResultsCards';
 import { SearchResultsLoader } from '../loaders';
 import SearchResultsHeader from './SearchResultsHeader';
+import LoadingIndicator from '../../components/LoadingIndicator';
 
 const LOG = new Logger('SearchResultsScreen');
 
@@ -47,6 +48,21 @@ const SearchResultsScreen: React.FC = () => {
         refetch,
     } = usePaginatedData({ query: query });
 
+    const observer = useRef<IntersectionObserver | null>(null);
+    const loadMoreRef = useCallback(
+        (node: HTMLDivElement) => {
+            if (dataLoading) return;
+            if (observer.current) observer.current.disconnect();
+            observer.current = new IntersectionObserver((entries) => {
+                if (entries[0].isIntersecting && moreToFetch) {
+                    refetch();
+                }
+            });
+            if (node) observer.current.observe(node);
+        },
+        [dataLoading, moreToFetch, refetch]
+    );
+
     if (!storageItem) localStorage.setItem('streamabilityView', initialView);
 
     // default to grid view on mobile
@@ -86,14 +102,12 @@ const SearchResultsScreen: React.FC = () => {
                 setShowDetails={setData}
                 setHash={setHash}
             />
-            {cards}
-            <Button
-                title='Load More'
-                loading={dataLoading}
-                onClick={refetch}
-                disabled={!moreToFetch}
-                sx={{ display: moreToFetch ? 'block' : 'none', marginBottom: 2 }}
-            />
+            <div>
+                {cards}
+                {moreToFetch && <LoadingIndicator />}{' '}
+                {/* Show the indicator while more data is available */}
+                <div ref={loadMoreRef}></div>
+            </div>
             <OfflineSnackbar />
         </div>
     );