defer report initial page load upon visiting

app/Filament/Company/Pages/Reports/BaseReportPage.php

@@ -41,6 +41,8 @@ abstract class BaseReportPage extends Page
 
     public Company $company;
 
+    public bool $reportLoaded = false;
+
     #[Session]
     public array $toggledTableColumns = [];
 
@@ -63,8 +65,6 @@ abstract class BaseReportPage extends Page
 
         $this->loadDefaultDateRange();
 
-        $this->loadReportData();
-
         $this->loadDefaultTableColumnToggleState();
     }
 
@@ -94,6 +94,7 @@ abstract class BaseReportPage extends Page
     public function loadReportData(): void
     {
         unset($this->report);
+        $this->reportLoaded = true;
     }
 
     protected function loadDefaultTableColumnToggleState(): void
@@ -142,8 +143,12 @@ abstract class BaseReportPage extends Page
     }
 
     #[Computed(persist: true)]
-    public function report(): ExportableReport
+    public function report(): ?ExportableReport
     {
+        if ($this->reportLoaded === false) {
+            return null;
+        }
+
         $columns = $this->getToggledColumns();
         $reportDTO = $this->buildReport($columns);
 

resources/views/filament/company/pages/reports/detailed-report.blade.php

@@ -17,14 +17,16 @@
                 </form>
             </div>
             <div class="divide-y divide-gray-200 overflow-x-auto overflow-y-hidden dark:divide-white/10 dark:border-t-white/10">
-                <div class="flex items-center justify-center">
+                <div wire:init="loadReportData" class="flex items-center justify-center">
                     <div wire:loading.delay wire:target="loadReportData">
                         <x-filament::loading-indicator class="p-6 text-primary-700 dark:text-primary-300" />
                     </div>
                 </div>
 
                 <div wire:loading.remove wire:target="loadReportData">
-                    <x-company.tables.reports.detailed-report :report="$this->report" />
+                    @if($this->report)
+                        <x-company.tables.reports.detailed-report :report="$this->report" />
+                    @endif
                 </div>
             </div>
             <div class="es-table__footer-ctn border-t border-gray-200"></div>