Even after the loading spinner stops and the page appears, there is a 10-second delay where scrolling and clicking buttons are not responsive in the browser

Despite the browser's loading spinner stopping and the initial content of the page appearing ready, all buttons are unresponsive and scrolling is impossible for at least 10 seconds after the spinner stops.

This page contains multiple views that are initially set to display: none. The delay in interaction seems to be caused by client-side issues as the browser's spinner completes its loading process.

Can anyone identify what is causing this delay and suggest a way to show a loading spinner until the page is fully responsive?

The page includes 20 Kendo Charts and several html tables.

Answer №1

It seems like Kendo UI is causing a javascript overload by extensively manipulating and altering the DOM. I have encountered similar issues personally. One effective solution is to analyze the Javascript usage using Developer Tools available in popular browsers. Perhaps consider why there are so many widgets on one page or site? It might be beneficial to only load necessary components instead of everything at once.

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

Is it possible to utilize AngularJs Directives in order to add a styling to a pseudo Element?

As I continue my journey to learn Angular, a roadblock has appeared while trying to create a directive. My goal is to construct a Directive that extracts the URL from a data-attribute ('background-image') and uses it as a background-image for a ...

Connecting req.body values to object key

Currently, when I need to add an object to the database, I follow these steps: return BSRequest.create({ salon_name: req.body.salon_name, salon_type: req.body.salon_type, employees: req.body.employees, postc ...

Ways to resize column widths in tree views on Odoo version 10?

I have been struggling to adjust the column width of the columns in my tree view. I have attempted a few different solutions: Trying to change the width attribute in the field tag: width="100px" or width="15%%" Using the style att ...

Utilizing the Eval() function to select checkboxes depending on input values

I am looking for clarification on the interpretation of this particular line: <%#Eval("MType").ToString() == "0" ? "&nbsp;" : "<input type=\"checkbox\" name=\"cb_Show_" + Eval("MType") + "_" + Eval("ID") + "\" " + ((bool)Eva ...

Does jqgrid navgrid have an event called "on Refresh"?

Is there a way to trigger an event before the grid automatically refreshes? I am looking for something similar to "onSearch" but for the reset button. Below is the code snippet for the navgrid: $("#jqGrid").jqGrid('navGrid','#jqGridPag ...

Converting a string to an HTML object in Angular using Typescript and assigning it to a variable

I am facing an issue with passing HTML content from a service to a div element. I have a function that fetches HTML content as a string from a file and converts it into an HTML object, which I can see working in the console. However, when trying to assign ...

Enhancing user experience with CSS dropdown menu animations

I've been working on adding a dropdown transition to my menu, but I can't seem to get it right. Can anyone point out where I'm going wrong or what needs to be added for the transition effect on the dropdown menu? Here is the CSS and HTML cod ...

Stop the child component from activating the parent's onClick event

Trying to implement Material-ui within a React project, I am facing an issue with the <IconButton> component and its onClick behavior conflicting with the parent component's behavior. Specifically, I want the <IconButton> to add an item to ...

Using CSS in combination with AngularJS, you can create a dynamic growth effect for a div element that initially

I am currently using AngularJS to dynamically add divs to a section. My goal is to have each div start with a static width and then grow dynamically as I continue to add more divs. How can I achieve this? The following code is not producing the desired re ...

Creating a hover effect in CSS that applies to neighboring elements with similar attributes

My table is created using a struts2 iterator and has variable length and content. It looks something like this: <table> <tr class="odd" machineId="1" parameterId="1"><td></td></tr> <tr class="even" machineId="1" pa ...

Deleting a File from a Directory and Database using PHP

I am facing an issue while trying to delete an image from both a folder and a database using PHP's unlink function and delete query. Despite my attempts, the image is not being deleted from the folder. Any assistance would be much appreciated. $filet ...

Testing the download functionality of a JavaScript unit

I need assistance in writing a unit test for the following function. Currently, I am only tracking how many times appendChild/removeChild is being called, but I believe there might be a better way to test this. Additionally, as a beginner in testing, I a ...

Implementing text assignment to a textbox field using React Redux

element: MainInput: ); } After successfully fetching student data from the database, I encountered an issue while trying to display the information in a textbox React Field. Even though this.props.firstname displayed the correct value on th ...

The ID data from my axios.delete request is not properly transferring to the req.body, causing issues with deleting from mySQL

Currently, I am utilizing Axios to manage the requests in my application. Upon testing with PostMan, it has been confirmed that my DELETE request is functioning properly. However, when implementing the code for the front end, I encountered a 404 error duri ...

Routing in Next.js to create custom URL slugs for usernames, like (site.com/username), is a

I have a requirement to create username pages on my website, where each username will have its own page like site.com/jack The current folder structure I am using is pages > [user] > index.js, but this setup causes issues when someone tries to acces ...

How to properly align labels with input fields using CSS

I'm facing a design challenge with my form, showcased in this fiddle: https://jsfiddle.net/ejkvp88v/2/. The inputs are centered, which is great, but I'm struggling to align the labels above the inputs on the left side. I've searched through ...

The value for MapControllerRoute cannot be left empty

After starting a web-api project on my Macbook in Windows mode, everything was working fine. However, when I downloaded the same project from Github to my Windows PC, I encountered an error upon starting the program. Below is the code snippet from my Macc ...

Has anyone been successful in getting OpenXml to function with dnx core 5?

We are currently facing the issue of needing to incorporate DNX core 5 and OpenXml for XLS exports in our application. Unfortunately, it appears that the OpenXml dependency is not compatible based on the error message received: "frameworks": { "dnx451": ...

What is the process to showcase a database value in a particular index of an HTML table?

I am looking for assistance with displaying selected data values from a database into specific positions in an HTML table. I have managed to write the code that displays the data, but it only shows up at index 0 on the table. Does anyone know how to make ...

Exploring TypeScript's type discrimination with objects

When working with TypeScript, type discrimination is a powerful concept: https://www.typescriptlang.org/play#example/discriminate-types But is it possible to achieve something like this? type A = {id: "a", value: boolean}; type B = {id: "b ...