Tips for speeding up ngShow initialization and troubleshooting when ng-cloak doesn't work

I encountered a similar issue to the one described in this question, but none of the solutions provided worked for me.

Here is a video showcasing my problem: https://www.youtube.com/watch?v=ByjmwmamemM

Upon loading my app, multiple popovers with ng-show checks are displayed. Despite starting as 'false', these popovers appear for 3-4 seconds before disappearing (which is quite a long time).

The suggested fix from the linked question was to load Angular at the top in the head section, and if that didn't work, to add .ng-cloak to both my CSS and the relevant div elements.

Unfortunately, neither solution resolved the issue :(

Has anyone else faced a similar problem?

Index.html:

<body ng-app="tickertags">

    <div ui-view></div>

dashboard.html <- first template loaded into ui-view

<div ng-controller="DashCtrl">
    <top-notification></top-notification>
    <alerts-panel></alerts-panel>
    <search-popover></search-popover>
    <tags-search></tags-search>
    <tags-filter></tags-filter>

    <div class="dash-body" ng-click="bodyClick()">
        <header>
            <platform-header></platform-header>
            <control-header></control-header>
            <view-header></view-header>
        </header>

        <tickers-panel></tickers-panel>
        <tags-panel></tags-panel>

        <section id="panel-activity" class="activity-panel">
            <chart-header></chart-header>
            <chart-iq></chart-iq>
            <social-media-panel></social-media-panel>
        </section>
    </div>

    <overlay></overlay>
</div>

The popovers:

searchPopover: (3-4 seconds before hiding)

<div ng-show="searchPopoverDisplay" class="search-popover" ng-cloak>

tagSearchPopover: (3-4 seconds before hiding)

<div ng-show="tagsSearch.tagsFuzzyResults" class="tag-search-popover" ng-cloak>

tagFilterPopover: (This popover disappears the fastest, within 0.5 seconds)

<div ng-show="tagsFilterOn" class="tags-filter-popover" ng-click="captureClick()" ng-cloak>

ng-cloak

// ng-cloak
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

Answer №1

Start by hiding them using CSS as the default, then adjust once Angular has loaded. The delay of 3-4 seconds may be due to the time it takes to fetch and load Angular alongside all other requests being made (be sure to check your network panel).

.show {
    display: block !important;
    opacity: 1 !important;
}

ng-class="{'show': searchPopoverDisplay}"

Answer №2

While a solution has already been provided, here is an alternative approach.

To achieve this using bootstrap.css:

<div class="collapse" ng-class="{'collapse': [falsy after ng evaluates] }"

This code snippet will eliminate the collapse class if necessary, remaining hidden until angular can assess it.

Alternatively, you can utilize any class that hides elements with display:none and then remove it with ng-class.

Answer №3

If you want to ensure that a div remains hidden until the page finishes loading, you can use the ng-hide directive within the class attribute. For example:

<div ng-show="searchPopoverDisplay ng-hide" class="search-popover" ng-cloak>

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

Bootstrap5: Left-aligned Navigation Bar Pills and Right-aligned Text

I am trying to align all my navigation pills to the left, and then add a single text element that stays at the end of the navbar even when the page is resized. Navbar Image My attempt involved adding a div so that the navbar pills would take up 50% width ...

Ending the sluggish jsdiff operation in just 2 seconds

Currently, I am utilizing the npm library jsdiff. This library contains a function that is able to determine the difference between two strings. However, it's worth noting that this specific function is synchronous and when used with large, dissimilar ...

Designing a web application with Angular2

As a newcomer to Angular2, I have recently started working on creating a simple hello world application. I have come across the concept of Modules and Components in Angular2. My main source of confusion lies in how to properly design an Angular2 applicat ...

Ways to retrieve the chosen option in a dropdown list without specifying the dropdown's name, id,

Custom dropdown, Model-View-Controller Code @foreach (var attribute in Model) { string controlId = string.Format("product_attribute_{0}_{1}_{2}", attribute.ProductId, attribute.ProductAttributeId, attribute.Id); @switch (attribute.AttributeControl ...

Encountered a null error while utilizing ES6 computed state in React components

In my .jsx file, I am encountering an issue with the following code block: <tr> {!isEmpty(content) && content.map(o => { if(o.sortKey){ console.log(this.state[`order${o.sortKey}`]) } })} </tr> After making chan ...

Utilizing JavaScript or jQuery in MVC4 to showcase information for the primary record

I'm currently working on constructing a page that displays a list of users. My aim is to have a "Details" link in each row that, when clicked, will render a partial view on the same page without having to reload it using either javascript or jQuery. D ...

Using AngularJS with CDN: A beginner's guide

If I need to create an app using AngularJS with Cordova in Visual Studio, do I need anything else besides the Google CDN for AngularJS? <!doctype html> <html ng-app> <head> <title>My Angular App</title> <script s ...

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

I am currently delving into the realm of typescript/angular2+ as a fledgling student, and I have taken on the task of creating a website to put my newfound knowledge to the test. The view is up and running, but I'm facing some roadblocks as I work on ...

Is it Possible to Utilize Gridster Across Multiple Tabs?

My goal is to build several dashboards using angular-gridster2 in angular 8. Each dashboard will be located within a separate tab, and I am currently encountering some issues with this setup. For example, if the first tab has 3 gridster items and the sec ...

Why is it that a website is loading at a snail's pace on Angular?

Working on my college project has been going smoothly, except for one issue with slow loading times. It's frustrating how long it takes to load. I suspect that there might be an error in the deployment process or something else causing the delay. The ...

The React Native application is working fine on the emulator but is encountering some issues when trying

While the app runs smoothly on an emulator through Android Studio, I encounter an error when trying to run it from the CLI. error Failed to install the app. Ensure that you have set up the Android development environment properly: <a href="https://fac ...

Utilizing AngularJS: A guide to implementing and manipulating arrays within HTML values

I've developed a unique custom directive incorporating the fields: ng-model, input-array <mydir ng-model="myBinding" input-array="input1,input2"></mydir> Data bindings for input 1 and input 2 are set up, but how can I intelligently gener ...

I am looking to retrieve data from the Graph API JSON and gradually refine my search to achieve successful

I am looking to retrieve data from the "fb_page_categories" endpoint, which provides an array of categories a page can be categorized under. The format for this request is as follows: GET graph.facebook.com /fb_page_categories? Once this request is mad ...

How to access an element through the router-outlet in Angular 6?

<side-navigation [navigationTitle]="navTitle"></side-navigation> <router-outlet> </router-outlet> Within my project, I have a navigation bar located in the root component. I have set up [navigationTitle] as an @Input Decorator wit ...

Adjust the audio volume by using an HTML range input element

I am currently facing issues while using the HTML range element to adjust the volume of an HTML audio element. In another instance on this site, I came across a one-line setVolume function that seemed to work, but now I am encountering an error ("Uncaught ...

Reorganize the sequence of rows in ng-table using AngularJS

I am looking to add a feature in my ng-table where users can switch between ascending, descending, and the original row order when sorting. Currently, I have enabled sorting using $scope.tableParams.sorting(), but it only switches between ascending and des ...

The grid component fails to display data from the store in ext js version 6.0.0

While studying the book 'Mastering Ext Js', I encountered a problem with the Grid Panel not loading data from the store. Despite checking the Json format server, everything seems to be fine and there are no errors in the console. Below is my mod ...

Print out the error message: "ERROR [ExceptionsHandler] Unable to access the property 'log' as it is undefined."

Just starting out with Nestjs and JavaScript but ran into an error when trying to print a text line using console.log() const my_text ="123" console.log(my_text) https://i.sstatic.net/xPnzX.png ...

Identifying the HTML elements beneath the mouse pointer

Does anyone know the method to retrieve the HTML tag located directly under the mouse cursor on a webpage? I am currently developing a new WYSIWYG editor and would like to incorporate genuine drag and drop functionalities (rather than the common insert at ...

Steps for automatically retrying a failed expect statement in Jest

In my React application, I am utilizing Jest for performing unit testing. One aspect of my application involves a Material UI date picker with next and previous buttons. The selected date is displayed in the browser URL. Each time the user clicks on the ne ...