I have an angularjs application and I am trying to improve its perceptual perfomance on load.
One annoying thing is that the page starts off as a blank page and seems to load everything before page slowly fades in.
I would much rather have some html load and let the xhr data subsequently populate as it comes.
Here's a visual of what I mean:
https://youtu.be/b1GxGJ0BUQU
I checked for the term cloak anywhere in the app and I could not find it. I also checked if there were any resolve attributes on the route and found nothing.
Any advice on improving this perceptual performance would be greatly appreciated!
This fade-in has to be coded somewhere, and we cannot help you find it without the code. You need to understand what triggers that fade-in, so that you could remove it to immediately display the page.
If the code is too big to be understood, one option is to stop the code execution as soon as it starts - for instance add a debugger; statement before the rest - and then use your browser developper tools to inspect the HTML: most likely there is a component full size and plain white on top of the rest, which gets removed at some point. Track its id or class names to find where it is dealt with in your code.
Again these are just advices but we cannot really help you understand a code/HTML that we can't see.
Related
Currently I'm working on a project where I'm converting HTML to PDF. The issue I've run into is if an element doesn't fit on a page (ex: a table) it gets cut and the remaining part of it is rendered on the next page.
I've used ReactPDF but haven't got it to work since the data I receive is entirely HTML. Currently I've combined HTML2Canvas and JsPDF but the closest i was able to get was to have a single page PDF that displays my data. But I want it to be in separate pages, with tables/images not being cut. So far I don't think there is any straightforward of getting this done and it'll require some hacks to get it to work but I haven't been able to figure it out.
If there is anyone who has worked around this issue before, I'd appreciate some insight on how to proceed with it.
Problem
I call setState to add a new recipe to my recipe list
The recipe is a new panel in a Foundation accordion
The accordion title pops up immediately
There is no functionality until page refresh
I have tried everything i can think of including Foundation's reInit, their manual toggle, up, and down methods for accordions, and re constructing the whole accordion
nothing works
This is the solution I came up with.
i was able to call $("#element").foundation("toggle",$target,true) from the console and programmatically open and shut the accordion tab.
element is the accordion wrapper and target the specific tab, true is a param to indicate reflow needed
implementing that function into my app was more trouble than it was worth, for a number of reasons.
i ended up just calling location.reload() and which essentially is like pressing the refresh button. with a modal animation running at the same time it is barely noticeable
so when all else fails manual over-ride could be a viable solution depending on what your individual page is
There is a real answer
in my research i came across quite a few similar github issues that had to do with Foundation plus some sort of dynamic rendering and/or third party framework/library. every situation is a bit different so there isn't one answer
if someone has specific knowledge of what why Foundation or React(possibly), wouldn't let me reInit,reflow,$(document).foundation or do any of the various supposed solutions: I would love to know.
perhaps I could have done something different but if you look at my code I keep state to one component, I init my js plugins in componentDidMount - as far as i know this is what i am supposed to do. thanks
I want to read about that effect you see on pages like Facebook or Airbnb when you open the page and the browser shows you the low fidelity design of page while the actual data loads - so you'll see grey box instead in the place where pictures of the users will be, grey rectangles instead of the text content etc. I've been searching for hours but cannot find anything useful, anyone knows the name of this UX practice?
I believe this is referred to as loading dummy content. There wasn't much info when I searched for it, but I do know that the basic principle is first load a gray background for images and dummy block font then wait for your content to render.
I am very new to all things Angular and have been experimenting with some stuff.
Been playing with UI-Router and with Angular Animations.
So far everything is going to plan, except one thing.
During the transition between pages (my top-most states) the footer area collapses up under the main content and against the navigation.
(I'm also fairly new to css transitions, so my knowledge is limited, but growing)
Is there anything that can be done to prevent this from happening? Maybe have it snag on to the height of whichever state is the tallest? (IE, the one leaving, or the one entering)
(I've tried searching everywhere, but whatever I search for I come up dry. Maybe I'm searching the wrong keywords.)
I have included a plnkr link
Thanks in advanced.
We have used htmleditor in our application. When the form is loaded every component is loaded properly. But htmleditor is taking huge amount of time to load.
Can anyone please suggest, is there any way to solve this problem?
As I found on a forum:
When I enable "CombineScripts" on the toolscriptmanager it is much
faster but the toolbar is not displayed.
Using CSS sprites or images on a directory for the toolbar (not as
resources as it is now) and removing any resourcestrings will boost
the control speed more than 1000%! Hope someone will implement it on a
next version, or I will do it when I find some time.
Hope it helps you.