Need support, Initially Django Search page is displaying all data, while i want to have only search text boxes and display data after user input - django

Question

Views.py
def advance_filter(request):
user_list = SarnarLogs.objects.all()
user_filter = UserFilter(request.GET)
return render(request, 'advance_filter.html', {'filter': user_filter})
Template: Advance_filter.html
<form method="get">
<div class="well">
<h4 style="margin-top: 0">Filter</h4>
<div class="row">
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.source.label_tag }}
{% render_field filter.form.source class="searchfield" %}
</div>
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.destination.label_tag }}
{% render_field filter.form.destination class="searchfield" %}
</div>
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.port.label_tag }}
{% render_field filter.form.port class="searchfield" %}
</div>
<div class="form-group col-sm-4 col-md-3">
{{ filter.form.request_no.label_tag }}
{% render_field filter.form.request_no class="searchfield" %}
</div>
</div>
<button type="submit" class="btn btn-primary" placeholder="Search" aria-label="Search" name="q" value='{{ request.GET.q }}'>
<span class="glyphicon glyphicon-search"></span> Search
</button>
</div>
</form><br>
<div class="col-12">
<div class="card my-4">
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
<h6 class="text-white text-capitalize ps-3">HUB Requests</h6>
</div>
</div>
<div class="card-body px-0 pb-2">
<div class="table-responsive p-0">
<table class="table align-items-center mb-0">
<thead>
<tr>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">ID</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">SOURCE</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">DESTINATION</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">PORT</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">REQUEST TYPE</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">REQUEST_NO</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">REQUESTER</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">START DATE</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">EXPIRY DATE</th>
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Days Left</th>
<th class="text-secondary opacity-7"></th>
</tr>
</thead>
<tbody>
{% for user in filter.qs %}
<tr>
<td>
<div class="d-flex px-2 py-1">
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">{{user.id}}</h6>
</div>
</div>
</td>
<td>
<p class="text-xs font-weight-bold mb-0">{{user.source}}</p>
</td>
<td class="align-middle text-center text-sm">
<p class="text-xs font-weight-bold mb-0">{{user.destination}}</p>
</td>
<td class="align-middle text-center text-sm">
<p class="text-xs font-weight-bold mb-0">{{user.port}}</p>
</td>
<td class="align-middle text-center text-sm">
<p class="text-xs font-weight-bold mb-0">{{user.request_type}}</p>
</td>
<td class="align-middle text-center text-sm">
<p class="text-xs font-weight-bold mb-0">{{user.request_no}}</p>
</td>
<td class="align-middle text-center text-sm">
<p class="text-xs font-weight-bold mb-0">{{user.requester}}</p>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-xs font-weight-bold">{{user.start_date|date:'d-m-Y'}}</span>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-xs font-weight-bold">{{user.expiry_date|date:'d-m-Y'}}</span>
</td>
<td class="align-middle text-center">
<span class="text-secondary text-xs font-weight-bold">{{ user.expiry_date|timeuntil:user.start_date }}</span>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5">No data</td>
</tr>
{% endfor %}
</tbody>
Any solution to load the page with search boxes and later when user provide inputs and hits the seach to display the data. Problem is that there are millions of records and page is consuming time to load up.
Appriciate if someone can provide insight in resolving it.