how to make blade or laravel render faster

fetching from the DB takes 0.04s (local enviroment) to retrieve 500 rows but rendering takes 10+ but feels like 40s, how do i get it to render faster

here is the function public function index(Classroom $classroom) { $classId = $classroom->id;

    //  Retrieving all students in a classroom
    $students = User::with('student')
        ->where('role', 'student')
        ->whereHas('student', function ($query) use ($classId){
            return $query->where('class', $classId);
        })
        ->get()
        ->toArray();

    return view('components.pages.admin.classroom.index', ['students' => $students, 'classroom' => $classroom]);
}

here is the blade @foreach($students as $student) {{ $student['student']['sname'] . ' ' . $student['student']['fname'] . ' ' . $student['student']['mname'] }} {{ $student['student']['registration_number'] }}

                <button class="w-[40px] h-fit cursor-pointer absolute top-[20px] right-0 z-50">
                    <i class="fas fa-ellipsis-h" @click="option = !option"></i>
                    @if(empty($students))
                        <i class="far fa-hand-pointer animate-bounce text-3xl"></i>
                    @endif

                    <div x-cloak
                         x-show="option"
                         class="hidden lg:block w-[150px] absolute top-0 left-full z-20 shadow-2xl drop-shadow-2xl shadow-purple-300 transition-all duration-[900] ease-linea backdrop-blur-xs"
                    >

                        <a onclick="setPoint('50', '50')"
                           href="{{route('admin.profile.student', 'regNo='.$student['registration_number'])}}" class="w-full h-[30px] px-5 hover:bg-[#32c18e47] flex gap-2 items-center justify-start">
                            <i class="fas fa-user text-sm text-gray-400"></i>
                            <div class="h-fit w-full px-2 text-sm font-bold text-start font-[quicksand]">profile</div>
                        </a>

                        <div class="w-full h-[30px] px-5 hover:bg-[#32c18e47] flex gap-3 items-center justify-start group relative" @click="more = !more">
                            <i class="fas fa-ellipsis text-sm text-gray-400"></i>
                            <div class="h-fit w-full px-2 text-sm font-bold text-start font-[quicksand]">more</div>

                            <i class="fas fa-caret-down text-sm ml-auto transition-all duration-200 ease-linear group-hover:-rotate-90 text-gray-400" :class="{'-rotate-90': more}" ></i>

                            <div class="w-[200px] h-fit absolute top-0 left-full group shadow-2xl drop-shadow-2xl shadow-purple-300 transition-all duration-[900] ease-linea backdrop-blur-xs group-hover:block" :class="{ 'hidden': !more }">
                                <div class="w-full">
                                    <a onclick="setPoint('800', '850')"
                                       href="{{route('admin.profile.student', 'regNo='.$student['registration_number'])}}"
                                       class="w-full h-[30px] px-5 hover:bg-[#32c18e47] flex gap-2 items-center justify-start">
                                        <i class="fas fa-share text-sm"></i>
                                        <div class="h-fit w-full px-2 text-sm font-bold text-start font-[quicksand]">transfer class</div>
                                    </a>

                                    <a href="{{route('admin.profile.student', 'regNo='.$student['registration_number'])}}" class="w-full h-[30px] px-5 hover:bg-[#32c18e47] flex gap-2 items-center justify-start">
                                        <i class="fas fa-trash-can text-sm text-red-600"></i>
                                        <div class="h-fit w-full px-2 text-sm font-bold text-start font-[quicksand] text-red-600">delete</div>
                                    </a>
                                </div>
                            </div>
                        </div>

                        {{--                                @livewire('create-class-room')--}}
                    </div>
                </button>
	</ul>
@endforeach