Filament Infinite Scroll Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require fibtegis/filament-infinite-scroll
   

   The package is auto-discoverable, so no additional configuration is needed in config/filament.php.

2. First Use Case: Replace pagination in a Filament table with infinite scroll by adding the ->infinite() method to your table definition:

   use Fibtegis\FilamentInfiniteScroll\InfiniteScroll;
   
   public function table(Table $table): Table
   {
       return $table
           ->columns([
               // Your columns...
           ])
           ->infinite(); // Enable infinite scroll
   }
   

3. Where to Look First:

   • README for feature highlights.
   • Changelog for version-specific notes.
   • Source Code for customization (e.g., InfiniteScroll class).

Implementation Patterns

Core Workflow

1. Basic Integration:

   $table->infinite()->paginate(10); // Default batch size (adjustable)
   

   • Automatically replaces pagination with infinite scroll.
   • Preserves all existing table features (filters, search, sorting).

2. Dynamic Batch Sizing:

   $table->infinite()->paginate(20); // Larger batches for faster loading
   

   • Optimize based on expected dataset size and user experience.

3. Relation Managers:

   public static function form(Form $form): Form
   {
       return $form->schema([
           // ...
           Tables\RelationManagers\PostsRelationManager::make()->table(function (Table $table) {
               return $table->infinite();
           }),
       ]);
   }
   

4. Widgets:

   public function getWidgets(): array
   {
       return [
           Widgets\StatsOverviewWidget::class,
           Widgets\InfiniteScrollWidget::class, // Hypothetical custom widget
       ];
   }
   

5. Customizing Scroll Behavior: Override the default InfiniteScroll class to modify:

   • Batch size logic.
   • Scroll threshold (e.g., trigger at 80% scroll height).
   • Loading indicators (e.g., custom spinners).

   // app/Providers/Filament/InfiniteScrollServiceProvider.php
   public function register()
   {
       $this->app->bind(
           InfiniteScroll::class,
           fn () => new CustomInfiniteScroll()
       );
   }
   

6. Hybrid Approach: Combine with pagination for small datasets:

   $table->infinite()->paginate(5)->when(
       request()->has('page'),
       fn () => $table->paginate(5)
   );
   

Gotchas and Tips

Pitfalls

1. Performance with Large Datasets:

   • Issue: Infinite scroll fetches all records in batches, which can strain memory if the dataset is unbounded (e.g., no limit in queries).
   • Fix: Ensure your query builder uses limit() or take():

     $table->query(fn (Builder $query) => $query->limit(1000)); // Hard cap
     

2. Stale Data on Filter Changes:

   • Issue: The package auto-resets on filter changes, but complex filters (e.g., multi-select) may not trigger a reset.
   • Fix: Manually reset the scroll position in custom actions:

     use Fibtegis\FilamentInfiniteScroll\InfiniteScroll;
     
     public function actionCustomFilter()
     {
         return Action::make('Filter')
             ->action(fn () => InfiniteScroll::reset());
     }
     

3. Theme Conflicts:

   • Issue: Dark/light mode may not inherit correctly if custom CSS is applied to the table.
   • Fix: Use the package’s built-in theme classes:

     $table->infinite()->theme('dark'); // Explicitly set theme
     

4. Livewire Hooks Interference:

   • Issue: Custom Livewire hooks (e.g., updated) may conflict with infinite scroll’s event listeners.
   • Fix: Register hooks after calling ->infinite():

     $table->infinite()->hook('updated', fn () => /* ... */);
     

Debugging Tips

1. Check Network Requests:

   • Open DevTools (F12) and monitor the Livewire tab for infinite scroll requests. Look for:
     • wire:click events triggering new batches.
     • Failed requests (e.g., due to missing cursor or per_page params).

2. Log Query Parameters: Add this to your table to inspect pagination params:

   $table->infinite()->hook('render', fn () => \Log::debug(
       'Infinite Scroll Params:',
       request()->query()
   ));
   

3. Disable Infinite Scroll Temporarily: Use a feature flag to toggle infinite scroll for debugging:

   $table->when(
       config('filament.enable_infinite_scroll'),
       fn () => $table->infinite()
   );
   

Extension Points

1. Custom Loading States: Override the default loading spinner by publishing the package’s assets:

   php artisan vendor:publish --tag=filament-infinite-scroll-assets
   

   Then customize resources/views/vendor/filament-infinite-scroll/loading.blade.php.

2. Server-Side Batch Processing: Use the InfiniteScroll::batch() method to customize how batches are fetched:

   $table->infinite()->hook('batch', fn (Builder $query, int $page) => {
       return $query->where('active', true)->orderBy('created_at')->take(15);
   });
   

3. Scroll Threshold Adjustment: Modify the scroll percentage that triggers the next batch:

   // In a service provider:
   $this->app->singleton(InfiniteScroll::class, fn () => new class extends InfiniteScroll {
       protected int $scrollThreshold = 90; // Default is 80
   });
   

4. Integration with Filament Actions: Ensure actions work seamlessly by resetting the scroll after execution:

   public static function getActions(): array
   {
       return [
           Action::make('Delete')
               ->action(fn (Table $table) => InfiniteScroll::reset())
               ->requiresConfirmation(),
       ];
   }