You may know that I totally fell in love with Dart and Polymer and once again, I have a question addressing those two technologies.
My application is a fairly compex polymer app written in Dart. There are some sort of "pages" whereas a page is shown once the user performed an action. The pages contain various types of content and the number of items can reach from zero to a few hundreds.
To enhance the user experience I've build a loader which you can register elements at and once all registered elements loaded, the page is shown. This works and feels pretty amazing but it's way to complicated to make sure to react on all the different states which can occur and overall I am not that happy with the loader thingy.
Thus I wanted to ask if there is anything in Dart or Polymer which helps me to show a loading indicator as long as not everything is fully loaded and once it is done, it hides the loader?
Use an HTML/CSS-only loading indicator and style it so that it becomes hidden when the unresolved attribute is removed from the body. See https://www.polymer-project.org/0.5/articles/styling-elements.html#preventing-fouc
Related
TL;DR: Deleting the DOM Element of a custom Element created with Angular Elements will lead to sub-routers not loading components
First, the code is available at Github.
Sadly, I did not get a stackblitz version running, but locally, after a clone, npm install and ng serve it should run fine.
About the general structure:
The Project shows an example of a WebComponent exposed by an Angular App via Elements.
The WebComponent is used in the index.html, which is referred as container Application.
The use case here is a little bit constructed, but the navigation that occurs, when clicking
on the two top bottoms is comparable to the real world use case.
Normally this WebComponent would have been used in an AngularJS legacy Application. Since there are many overlappings between the two root views (overview1 overview2) it is used in two AngularJS components, in between ui-router handled navigation. This means, that exactly this constructed actions happen. The DOM Elements will be deleted and re-added.
So basically the problem is:
If I am deleting DOM Elements of a WebComponent (so deleting the CustomElement itself) from external, and then re-adding it with another route, The Child-route components of this will not get loaded. If there is a short delay (50ms), everything works fine.
To reproduce the problem:
Load page and click an the "switch with delay" button.
Reveal Detail Component
Switch to the other Overview by clicking "switch with delay" again.
Reveal Detail Component
=> Everything should work fine
Repeat the same steps, but this time click only on "switch directly".
Prior Investigations
What I already debugged is the Router. So I went through the log messages with "enable tracing"
and they seemed to be no differences. Afterwards I compared the Components' Lifecycle and
the thing I noticed is, that in the working example the old Detail**1**Component Object will get destroyed a new Detail**1**Component one will be created and directly destroyed afterwards and then everything regarding the Detail**2**Component will get constructed.
On the not working example it is like this:
A new Detail**1**Component will get constructed again and destroyed afterwards. Then the old Detail**1**Component will get destroyed. Then nothing regard the Detail**2**Component will get constructed.
So routing seems to work fine, but components won't get loaded in this case, maybe due to a strange lifecycle, because of the Detachment of the View to the ViewModel happening due to hard deleting those WebComponent in DOM.
Maybe I am just dumb and did something fundamentally wrong, but I could not find anything in the Web regarding this problem and every solution I tried by myself just resulted in a workaround like establishing a delay.
You can find a workaround available on Github.
I forced the recreation of the DOM object by attaching a boolean
to the navigation button, which will determine if the DetailComponent
should actually get shown.
<router-outlet *ngIf="shown">
Then the Outlet will get reevaluated and the DOM will get refilled on clicking the button.
This will effectively mitgating the issues described.
In my opinion its not the cleanest solution, but cleaner than a timeout, that
even needs to get applied from the outside.
I hope this was helpful and maybe someone might point me to the actual fix and
not only workaround.
Since this was my first question do not hesitate to give me feedback on formal
appearance.
I have got a website, that is lazyloading react scripts from different sources. For each script loaded, we provide a div with the name of the script as id. As soon as the script is loaded, it searches for the div with the id and renders the components.
As the site is displayed on a stationary tablet it does not reload very often and the memory footprint gets pretty big. Is there a way to completely unload a react script without reloading the website? Is there even a way to just unload any
kind of script? I guess the garbage collector is responsible for this, but currently its not even removing scripts / components that have unmounted a long time ago.
As I was searching for a solution, I found this thread about angular. I'm basicly looking for a way to do the same with react (Even tho I didn't test the angular solution).
Before removing the script tag and the container DOM node, you can use unmountComponentAtNode to allow React to do its cleanup.
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
Use a design pattern that uses conditional rendering and check in the componentDidMount if either data is returned or the specific section is to be rendered.
So first time so please admit tiny issues.
I am working on an app which getting slow while it grows. We have implemented one app for different branches of our company and making part visible or not by a big configuration file.
Problem is now regardless whether a part of the form is visible or not. He always initiate the controller of the non visible part. That all cost time and makes the application lame.
I am searching for way to suppress the initiating of the controller. When i remember the alloy annotation correctly there was a "rendered" attribute which is now not available anymore.
Has someone an idea how i could realize this?
So i used an attribute called "rendered" and let the controller react to it. It helps to boost the performance dramatically.
Further i noticed the the pure mass of visible information also slows down the performance of the iPad so i used a scrollable view to put information on. That also accelerate the app.
I have a single-page web app (actually, its PhoneGap).
It has a lot of different 'pages' or screens - about 30 now.
The issue is if each page has loaded some content (complex element lists, sometimes hundreds of items long), the app starts to bog down and become very slow, as all the html is present, even if hidden.
I was thinking that if between pages changes i store the HTML for the content in a variable, to be called and put back in the DOM when a user wants to go back to that page, will this make other pages faster than leaving everything in the DOM? So basically I only have 1 full page in the html at a time.
Just wanted to ask before i spent time doing it! any other links for fast web apps would be appreciated too
You may need to remove the useless DOMs to release the memory.
Actually, when you realize your page (or App) is going slower and slower, you should pay attention on the memory.
Remove all useless DOMs would be a smart choice on your case. Next time, you need to show it again, you can re-initialize it.
Sometimes, you may also need to remove useless js objects, unbind events, etc.
I have an asp.net-mvc website where there is a top section with a bunch of filter information and the middle section is a reports. I now have a few different report formats and I want to toggle between a few reports. I have it working by making them all partial views and loading them via ajax (to avoid loading the common info over and over again) but one issue i realized is that some of the different reports have different javascript that goes along with them. For now, I am loading up all of the javascript files in the main parent page but I realized that I am wasting a lot of resources by download and wiring up all of the jquery events even if i never actually view a report
Is there anyway I can pass some javascript along with downloading a partial view in asp.net-mvc so I only load this and wire up the events "on demand" as required (instead of always)
Of course you can. Just be aware that the effects of the code will stick around even if you later remove the code itself: any functions you defined will remain defined, any listeners you attached will remain attached (as long as their target elements persist)... so it would be a good idea to make a setup() and teardown() methods for the loading code, that you'd invoke from your controlling code, rather than just drop a bunch of code to execute as it loads.
However, I would say it would need to be a rather unique set of circumstances for me to employ this method; for most part, it would be much easier and efficient to just load all the code you need at once, to benefit from client caching if nothing else. Toggle the behaviour of your code, don't toggle the code.