ASP UpdateProgress control on async page load

I have an async page load that fetches data from an API and binds it to a repeater inside an update panel, separate to local search results.

There is a script manager in the master page.

<div class="searchResultContainer" runat="server" id="divApiResults">
<div class="searchResult">
    <asp:UpdatePanel ID="udpApiResults" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">

        <ContentTemplate>

            <asp:UpdateProgress ID="updateProgress" DisplayAfter="1000" runat="server">
                <ProgressTemplate>
                    <div id="lblLoadingApi" runat="server">
                        Loading...
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>

            <asp:Label runat="server" CssClass="label searchResultLabel" Text="EXTERNAL SEARCH RESULTS" />

            <asp:Repeater ID="rptApiResults" runat="server">
                <!-- template in here -->
            </asp:Repeater>

        </ContentTemplate>

    </asp:UpdatePanel>
</div>
</div>

However, the update progress control is never shown on page load or when the repeater is sorted or the page changes. How do I get it to show "loading" until all data is loaded in the repeater?

I was doing things wrong. The update progress modal will never appear on an asynchronous page load, due to it being already loaded before the page has rendered. As it was posting back when it was paging and sorting that's when the UpdateProgress appeared.

My solution was load it asynchronously after the page load (as it's in an update panel it doesn't affect the rest of the page), by using a piece of jQuery to click a "trigger" button on $(document).ready(...), which then went off to fetch the API results. This also set the UpdateProgress to visible which disappeared after the results had finished loading.