Update app.py

app.py

@@ -111,7 +111,7 @@ df['url'] = 'https://huggingface.co/spaces/' + df['id']
 
 # ------------------------------------------------------
 
-def search_spaces(search_text="", category="All Categories", offset=0, page_size=30):
+def search_spaces(search_text="", category="All Categories", offset=0, page_size=100):
     if category == "All Categories":
         spaces_df = df
     else:
@@ -183,16 +183,9 @@ def search_spaces(search_text="", category="All Categories", offset=0, page_size
     if offset + page_size < total_spaces:
         html_content += f"""
         <div style='text-align: center; padding: 20px;'>
-            <button onclick='window.loadMore()' 
-                    style='padding: 10px 20px;
-                           background-color: #2196F3;
-                           color: white;
-                           border: none;
-                           border-radius: 5px;
-                           cursor: pointer;
-                           font-size: 1em;'>
-                Load More ({total_spaces - (offset + page_size)} remaining)
-            </button>
+            <p style='color: var(--color-text-primary);'>
+                {total_spaces - (offset + page_size)} more spaces available
+            </p>
         </div>
         """
     
@@ -219,32 +212,22 @@ def create_app():
         
         with gr.Row():
             with gr.Column(scale=1):
-                # Category selection
                 category_dropdown = gr.Dropdown(
                     choices=["All Categories"] + sorted(df['category'].unique()),
                     label="Select Category",
                     value="All Categories"
                 )
-                # Search box
                 search_input = gr.Textbox(
                     label="Search Spaces",
                     placeholder="Enter search terms..."
                 )
             
-        # Display area for spaces
         spaces_display = gr.HTML(value=search_spaces("", "All Categories"))
-
+        load_more_btn = gr.Button("Load More", visible=False)
+        
         def load_more(search_text, category, offset):
             new_offset = offset + 30
             return search_spaces(search_text, category, new_offset), new_offset
-
-        # JavaScript for handling the Load More button
-        app.load(None, None, None, _js="""
-        function loadMore() {
-            const event = new CustomEvent('load_more');
-            document.dispatchEvent(event);
-        }
-        """)
         
         # Update display when category or search changes
         category_dropdown.change(
@@ -258,12 +241,11 @@ def create_app():
             outputs=[spaces_display, current_offset]
         )
         
-        # Load More event handler
-        app.load(
+        # Load More button handler
+        load_more_btn.click(
             fn=load_more,
             inputs=[search_input, category_dropdown, current_offset],
-            outputs=[spaces_display, current_offset],
-            _js="(x) => document.addEventListener('load_more', () => x())"
+            outputs=[spaces_display, current_offset]
         )
     
     return app