Is there a way to show a loading animation when the list view is first loading and being populated?

I am facing an issue with a page that contains an iFrame (RadTabStrip with MultiPageView). The content being loaded into the iframe is a RadListView which takes some time to render. This problem exists for other tabs/iframes as well.

My goal is to have an animated gif display while the listview is in the process of rendering. I have tried using the Telerik AJAX loading panel, but it seems like the panel won't show up until after the list has finished rendering. There is a delay of about 10 seconds where the iframe remains blank, then quickly flashes the loader, and finally displays the list.

If anyone can suggest a solution or help me understand why the page refuses to load anything until the listview is fully rendered, I would greatly appreciate it.

While the list is loading, this message appears on the page. The browser's "loading" indicator does not spin because the main page frame has already been fully loaded, just not the iframe content:

Then, once the list is completely rendered, this alert suddenly pops up:

javascriptasp.nettelerik

Answer №1

If you're looking to enhance user experience by incorporating a loading overlay, consider utilizing the UpdateProgress control in your project. While I can't guarantee its compatibility with iframes, the following code snippet can guide you on how to implement it:

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
                    Please wait...
                </div>
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

To fine-tune the overlay's appearance, leverage the provided styles that allow for opacity adjustments:

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on creating a JavaScript library similar to jQuery utilizing ES6 and webpack

Recently, I've been working on developing my own Javascript library using ES6 and Webpack. Everything seems to be functioning well for the most part, but I've hit a roadblock. When attempting to use the library as a standalone by including <sc ...

javascripttypescriptecmascript-6

Using AJAX to manipulate the document structure and execute a function

Currently, I am operating on Linux -both browser side & server side- using either Firefox 38 or 42. For more context, you can refer to this question and the GitHub project containing my GPLv3 code. The web application is not standard as it typically has on ...

javascriptjqueryajaxlinuxhtml

Utilizing React and Redux for dynamic on-page computations

Currently, I am retrieving data from an API using react-redux. My goal is to load the data, perform some calculations, and then display the result on the page. However, I've encountered an issue where the data doesn't display on the first load, b ...

javascriptreactjsreact-redux

I am looking to transfer an image stored in a database onto a card

One issue I am facing is that when trying to display an image from a database, uploaded by a user and showing on a card with additional information like name and price, an icon resembling a paper with green appears in the output. Here's my code snippe ...

javascriptphphtmlmysqlajax

How to trigger a function when clicking on a TableRow in React using MaterialUI

Can someone help me understand how to add an onClick listener to my TableRow in React? I noticed that simply giving an onClick prop like this seemed to work: <TableRow onClick = {()=> console.log("clicked")}> <TableCell> Content </Ta ...

javascriptreactjsmaterial-ui

Ensuring thoroughness in validation without the use of specific text strings

Implementing the assignment or assertion of never at the end of a function is a strategy commonly used in Typescript to ensure exhaustive checks at compile time. To enable the compiler to recognize this, explicit strings are needed for it to check against ...

javascripttypescript

Show various columns in Select2

I am currently utilizing select2 and I am interested in displaying a multicolumn table as a dropdown. In order to achieve this, the width of the drop-down container should differ (be larger) than the input itself. Is it feasible to accomplish this? Furth ...

javascriptjquery-select2dropdownbox

The absence of $_POST results in the values being stored in $GLOBAL instead

Ever since I reinstalled my OS, I've been encountering a peculiar $_POST issue. When I returned to one of my side projects, I realized that all my POST requests were not functioning properly, despite having worked before. I've observed that all ...

javascriptphpjqueryhtml

Encountering a Selenium StaleElementException when attempting to resubmit a form after filling it

I am currently working on automating the filling of a form in one of my Selenium scripts. The form consists of 4 text fields with the following HTML structure: <input class="class" id="id" name="name" value="" autocomplete="off" wtx-context="stuff" typ ...

javascriptjavaajaxformsselenium

Having trouble processing the Firebase snapshot with Node.js

I have a question regarding a snapshot; ref.orderByChild("index").equalTo(currentIndex).once("value", function(snapshot) {}) After printing the snapshot with ; console.log(snapshot.val()); This is the output that gets printed; {'-LBHEpgffPTQnxWIT ...

javascriptnode.jsfirebasefirebase-realtime-database

Incapable of stacking one canvas on top of another

I'm new to javascript and looking for help with positioning a canvas element behind another. The code I have may be a bit messy, so any assistance is greatly appreciated. My goal is to have the canvas named "myCanvas" appear behind "coinAnimation". Th ...

javascripthtmlcsscanvas

Can you explain the usage of the +new Date syntax in node.js?

Apologies if this is a repeat. I came across +new Date in a GitHub project and decided to test it out. It returns the timestamp as a number data type. In contrast, new Date() returns the time format as a string. Could someone explain the meaning of the ...

javascriptnode.jssyntax

Generating identical circles using PointsMaterial and CircleGeometry

My goal is to generate circles using two different methods: By utilizing a circle sprite and drawing it with Points and PointsMaterial Using basic circle buffer geometries Unfortunately, I am facing challenges trying to align them due to the size discrep ...

javascriptthree.js

Function in Vue for calculating the number of duplicate elements in an array

I have successfully created a new array containing only unique values, but I am facing issues with my count function. The desired result is to display the number of items in the array for each color. The expected outcome would be: 4 red 10 blue 1 green ...

javascriptarraysvue.js

Summing up values based on specific conditions in Mongoose: `$sum

I am currently working on a query that involves using find and aggregate to retrieve data from the Schedule model. I need to calculate the total sum of services and the total value of services, but with a condition where the status is equal to 2. Is it pos ...

javascriptmongodbmongoosemongodb-queryaggregation-framework

Is your webpage slow to respond after a page-refresh? (Delayed HTML rendering causing lag)

Whenever I adjust the screen size to that of a phone or any device smaller than 768px, the search bar doesn't display in its proper position until the page is refreshed. It should be correctly placed right from the start. Furthermore, when I resize th ...

javascriptcsstemplatesprestashopresponsiveness

The file cannot be accessed or modified by the Microsoft Office Access database engine

A task requires fetching data from an Excel worksheet into a .NET GridView. Below are the ASPX and ASPX.CS codes for achieving this: ASPX: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE ...

c#asp.netexceloledbconnectionoledbexception

Always Seek Permission for Geolocation in Cordova

Is there a way in PhoneGap to update the Geolocation plugin's permissions from "while in use" to "always" without manually editing the .plist file? I noticed that changing the NSLocationAlwaysUsageDescription key in the project's config.xml sets ...

javascriptioscordovapermissionsgeolocation

"Enhancing Error Handling in Express with Node.js Middleware for Parsing

I've been working on developing a middleware to manage errors, but I'm struggling to send the correct format to my frontend. Below, I'll outline my various attempts in the hopes of getting some guidance on this issue. Attempt 1 app.use(fun ...

javascriptnode.jsexpress

Developing a notification system using a combination of ajax, jquery, and Iframe

I am in the process of setting up a messaging system on my website. Currently, I have a table with three columns - two integer fields (from and to) and a timestamp for the date of sending. On one section of the page, I want to display a list of messages ...

javascriptphpjqueryajaxiframe