Untitled

function showLoadingSpinner() {
    // You can display a loading spinner or any loading indicator here
    $(".LiveQuizLeaderboard").html('<div class="loading-spinner">Loading...</div>');
}

function hideLoadingSpinner() {
    // You can hide or remove the loading spinner here
    $(".LiveQuizLeaderboard").empty();
}

function fetchData() {
    showLoadingSpinner(); // Show loading spinner before making the AJAX request

    $.ajax({
        type: "GET",
        url: "{{ route('live_quizzes.admin_live_leaderboard', ['quiz_id' => $live_quiz->id, 'code_id' => $live_quiz->code->id]) }}",
        success: function(result) {
            hideLoadingSpinner(); // Hide loading spinner after successful AJAX request

            if (result && result.status === 0) {
                var data = result.data;
                console.log('ajax data', data);

                // Display the total participants
                $("#total_participants").html(data.total_participants);

                // Display the total playing users
                $("#total_playing").html(data.users.length);

                // Update the HTML content of LiveQuizLeaderboard
                var htmlView = '';

                if (data.users.length > 0) {
                    data.users.forEach(function(user) {
                        htmlView += `
                            <div class="car-content text-start mt-2">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center waiting_area">
                                        <div class="d-flex justify-content-between w-100 align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div class="card-image">
                                                    <img src="${user.image}" alt="${user.name}" width="50" height="50">
                                                </div>
                                                <h5 class="card-text text-white m-2">@ ${user.name}</h5>
                                            </div>
                                            <div class="">
                                                <form action="/dismiss" method="post" class="cursor-point ajax-delete2">
                                                    @csrf
                                                    <button title="Dismiss user from the quiz !!" type="submit"
                                                        class="btn-remove delete cursor-point btn btn-sm  btn-outline-light ml-2 border">
                                                        <i class="fas fa-user-times fa-lg" style="color: #ff0000;"></i>
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                } else {
                    htmlView = `
                        <div class="car-content text-start mt-2">
                            <div class="card-body">
                                <div class=" d-flex justify-content-between align-items-center waiting_area">
                                    <div class="d-flex align-items-center">
                                        <h3 class="card-text text-white m-2">No User Join Yet!</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }

                $(".LiveQuizLeaderboard").html(htmlView);
            } else {
                console.error('Invalid response format');
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            hideLoadingSpinner(); // Hide loading spinner after AJAX request, even if there's an error
            console.error('AJAX request failed:', textStatus, errorThrown);
        }
    });
}

fetchData(); // Initial fetch when the page loads
setInterval(fetchData, 5000); // Fetch data every 5 seconds