load active tab data each time in laravel to speed up performance

I have 5 tabs on my page. I am fetching data from controller for those 5 tabs and showing on view in datatable. But as the records are increasing page loading time increasing. So I need to load data one at a time. I guess on page its loading all 5 tabs data so its slowing down the page reload.

I have tried this link. But its not working.

View:

<!-- Nav tabs -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                
                  <li class="nav-item @if($tab === 'hot-leads') active @endif">
                    <a class="nav-link @if($tab === 'hot-leads') active @endif" id="hotleads-tab" data-toggle="tab" href="hot-leads" role="tab" aria-controls="hot-leads" aria-selected="true">Hot Leads</a>
                  </li>    
                    
                    
                  <li class="nav-item  @if($tab === 'active-leads') active @endif">
                    <a class="nav-link @if($tab === 'active-leads') active @endif" id="active-tab" data-toggle="tab" href="active-leads" role="tab" aria-controls="active-leads" aria-selected="false">Active</a>
                  </li>
                  
                  
                  <li class="nav-item @if($tab === 'approved-leads') active @endif">
                    <a class="nav-link @if($tab === 'approved-leads') active @endif" id="approved-tab" data-toggle="tab" href="approved-leads" role="tab" aria-controls="approved-leads" aria-selected="false">Approved</a>
                  </li>
                  
                  
                   <li class="nav-item  @if($tab === 'completed-leads') active @endif">
                    <a class="nav-link @if($tab === 'completed-leads') active @endif" id="completed-tab" data-toggle="tab" href="completed-leads" role="tab" aria-controls="completed-leads" aria-selected="false">Completed</a>
                  </li>
                  
                  <li class="nav-item @if($tab === 'disabled-leads') active @endif">
                    <a class="nav-link @if($tab === 'disabled-leads') active @endif" id="disabled-tab" data-toggle="tab" href="disabled-leads" role="tab" aria-controls="disabled-leads" aria-selected="false">Disabled</a>
                  </li>
                  
                 
                  
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    
                    @include('includes/'.$tab, $data)

                </div> <!--Tab contet end--->

One of the Partial view will look like below:

<div class="tab-pane active" id="active-leads" role="tabpanel" aria-labelledby="active-tab">

            <div id="lead_div2" style="margin-top:3%">
                <table class="table table-striped table-bordered" id="leads">
                  
                  //for loop to display fetched data... 
                   
                </table>
            </div>
</div> <!--Tab Pane end -->

Controller:

public function index(Request $request)
    {

        return redirect('/admin/test/hot-leads');

    }

public function showtest(Request $request, $tab)
    {

  if ($tab === 'hot-leads') { 

 $HotLeadInfo= DB::table("table1")
                         .....
                        ->get();    

    $data = ['HotLeadInfo' => $HotLeadInfo];

  }

   if ($tab === 'active-leads') { 

 $LeadInfo = DB::table("table1")
                       ...
                        ->get();  

    $data = ['LeadInfo' => $LeadInfo ];
    
  }

  if ($tab === 'approved-leads') { 

  $ApprovedInfo= DB::table("table1")
                        ....
                        ->get(); 

    $data = ['ApprovedInfo' => $ApprovedInfo];
    
  }

    if ($tab === 'completed-leads') { 

   $CompletedInfo= DB::table("table1")
                       .....
                        ->get();

    $data = ['CompletedInfo' => $CompletedInfo];
    
  }

    if ($tab === 'disabled-leads') { 

   $DisableInfo= DB::table("table1")
                            .....
                        ->get();

    $data = ['DisableInfo' => $DisableInfo];
    
  }

  return view('manage', [
    'tab' => $tab,
    'data'=> $data
  ]);


    }

Routes

Route::get('/admin/test', 'ManageController@index')->name('manage')->middleware('auth');

Route::get('/admin/test/{tab}', 'ManageController@showtest')->name('show-manage')->middleware('auth');

Now i am facing problem in tab clicks. With above code its showing hot-leads data for every tab. When I hover to tab its showing me proper link but when i click other tabs page url is not changing. so its not loading other tabs data.

I tried by changing href of anchor tag of tabs ( <a class="nav-link @if($tab === 'active-leads') active @endif" id="active-tab" data-toggle="tab" href="active-leads" role="tab" aria-controls="active-leads" aria-selected="false">Active</a>) but that's not worked.

I am not getting where will be the problem. please help or suggest any other way of lazy loading of tabs for increasing performance of page.

via Chebli Mohamed