show loding data in bootstrap table

I use bootstrap-table through the fresh-bootstrap-table template

This is the html page that I created

<!doctype html>
<html lang="en" dir="rtl">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Style -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
    <link href="assets/css/fresh-bootstrap-table.css" rel="stylesheet" />

    <!-- Fonts and icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Cairo:400,700,300" rel="stylesheet" type="text/css">





</head>

<body>


    <div class="fresh-table full-color-blue full-screen-table">
        <!--
    Available colors for the full background: full-color-blue, full-color-azure, full-color-green, full-color-red, full-color-orange
    Available colors only for the toolbar: toolbar-color-blue, toolbar-color-azure, toolbar-color-green, toolbar-color-red, toolbar-color-orange
  -->



        <div class="toolbar">
        <button id="alertBtn" onclick="location.href='https://numberozo.com';" class="btn btn-default">بحث  جديد</button>
            <button type="button" onclick='moredata()' class="btn btn-secondary">المذيد من البيانات</button>
        </div>
        <table id="fresh-table" class="table" data-show-export="true">
            <thead>
                <th data-field="name" class="text-center">name</th>
                <th data-field="phone" class="text-center">phone</th>
                <th data-field="actions" class="text-center" data-formatter="operateFormatter"
                    data-events="operateEvents">action</th>
            </thead>
            <tbody>


            </tbody>
        </table>
    </div>
  

    <form id='myform' action='https://numberozo.com/results/' method='post'>
        <input id='usernumber' type='hidden' name='num' value=''>
        <input type='hidden' name='country' value='<?php echo $info[0]["cantry"] ?>'>
    </form>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.20.2/bootstrap-table.min.js"></script>
   
   
   


   
   <script type="text/javascript">
    var $table = $('#fresh-table')
    var $alertBtn = $('#alertBtn')

    window.operateEvents = {
        'click .like': function(e, value, row, index) {
            console.log(value, row, index)
        },
        'click .edit': function(e, value, row, index) {
            console.log(value, row, index)
        },
        'click .remove': function(e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            })
        }
    }



  

    function operateFormatter(value, row, index) {

        return "<a rel='tooltip' title='رسالة وتساب' class='table-action like' href='https://wa.me/" + row.phone +
            "' title='Like'> <i class='fab fa-whatsapp fa-lg'></i></a> <a rel='tooltip' title='اتصال' class='table-action edit' href='tel:" +
            row.phone +
            "' title='Edit'><i class='fas fa-phone fa-lg'></i></a><a rel='tooltip' title='مذيد من الأسماء' class='table-action remove' href='#' onclick='formSubmit(" +
            row.phone + ")' title='مذيد من الأسماء'><i class='fas fa-info-circle fa-lg'></i></a>"


    }


    $(function() {
        $table.bootstrapTable({
            classes: 'table table-hover table-striped',
            toolbar: '.toolbar',
            search: true,
            showRefresh: false,
            showToggle: true,
            showColumns: true,
            pagination: true,
            striped: false,
            sortable: false,
            showExport : true,
            height: $(window).height(),
            pageSize: 8,
            pageList: [8, 10, 25, 50, 100],

            formatShowingRows: function(pageFrom, pageTo, totalRows) {
                return ''
            },
            formatRecordsPerPage: function(pageNumber) {
                return pageNumber + ' عدد النتائج'

            }

        })

        $(window).resize(function() {
            $table.bootstrapTable('resetView', {
                height: $(window).height()
            })
        })
    })

    function formSubmit(phone) {
        document.getElementById('usernumber').value = phone;
        document.getElementById("myform").submit();


    }

    function moredata() {
        //document.getElementById("moredata").submit();


    }

    $(document).ready(function() {
        //Function call
        setname();

    });

    function setname() {
        document.getElementsByClassName("search-input")[0].placeholder = "بحث في النتائج";
        document.getElementsByName("toggle")[0].title = "تغير العرض";
        $table.bootstrapTable('resetView', {
            height: $(window).height()
        });

    }
    $.getJSON("http://localhost/num/homep/new-api-number.php")
        .done(function(data) {
            $($table).bootstrapTable('load', data);
        })

    </script>

</body>

</html>

I am displaying JSON data correctly through this code

   $.getJSON("http://localhost/num/homep/new-api-number.php")
            .done(function(data) {
                $($table).bootstrapTable('load', data);
            })

The problem is that it does not show "loading" until the data appears, but it shows No matching records found i traying to add

 $table.bootstrapTable('showLoading');

but disnt work

How can I show that the data is being downloaded, and if the download is not done, another text appears stating that there is no data