I am building a React App using the react-router library and the Flux architecture.
Now a doubt came up. Should I load all the required data upfront or make each route load the data it needs when it's the time? It would be weird when the user enters the app through an edit page and, when he saves the form it goes to the list of objects but it's empty (has only the one object) until the data is fetched.
What would be the best approach?
You don't want to go deep into preloading data in anticipation of what the user is going to do. It improves the UX of the list screen but it degrades the UX of the edit screen. I've been down that road. It's fine at first, but as requirements change, and you start also loading this or loading that, the UX really goes downhill.
In Flux, you should only load data in the Action. To initialize the data for your component, you can call the appropriate Action from componentWillMount().
If you're worried about the user seeing no data when they navigate to the list screen for the first time, you should show some sort of loading indicator.
If your data loads slowly, you should implement a progressive loading scheme (maybe 5 items at a time).
For a look-and-feel example, just open up the main News Feed on facebook.com. Notice that initially (depending on your internet speed), there are no stories listed. You see blurry boxes into which stories will load. As the data loads, stories appear. They also have progressive loading implemented. Notice that as you scroll down the page (quickly), you'll see that blurry box at the bottom of the page before older stories are loaded and rendered.
Related
I have a website which is deployed on Netlify below:
https://hungry-mclean-362570.netlify.com/
Github:
https://github.com/shindosu/mutsuki-portfolio-client
To give a bit of a background, the app is powered with React JS. In the Home page within the <div id="right-side">, I have two React components being rendered. They each are powered by THREE JS, and it is alternating between two pictures infinitely with image transition animations via GSAP. So in total, I have 4 images being rendered on the right hand side. The size of the images are around 13MB total (more images to come)
I also have a slider, where if the value hits >=50 then the styling and the images will change to let the user know the "category" of the images that they are looking at.
Now, it is no where near being done so don't mind the incompleteness. What's bothering me is the loading time of the images (handled by THREE JS, GSAP) is taking an insanely long time to load, which I think is also affecting the loading time of the other elements as well.
How am I able to speed up the loading process?
I tried decreasing the image sizes (it was 60MB before..currently 13MB!); am trying to shred off more but the most I can get down to is around 600~KB/img without losing any substantial quality.
Are there any other way to get around this? This will be a portfolio website so there's more images that will be in the projects page, so I'm assuming if I continue the way that I'm doing right now the outcome is going to be as or more worse than the page that I am working on.
Thank you for your time!
To load images faster in a React application you can use one of the following techniques:
Use lazy loading method --> The image loads only when the user scrolls to it.
Use blur technique --> This loads the images in low resolution initially before the original load
Use JPEG-XR and WebP instead of PNG, JPG etc.
For more details you can refer to https://teacode.io/blog/how-to-speed-up-your-react-app-using-cloudinary-and-lazy-loading
Note: I am not an expert. I was also searching how to increase load speed of images and came across some articles like that mentioned above.
I'm loading 2000+ video cards in a big list (that loads/functions quickly with react-window). This main page can take a while to load the first time but then does fine after that (it's loading then cache-ing 10MB of data). I'm trying to show a spinner (loading animation) while the data loads. In other sites, I've simple done a basic conditional to test to see if the length of the items array I'm loading is greater than 0. But with Gatsby, it seems like the site loads the array just fine so array.length doesn't work here.
Is there some kind of event or way to test that the page-data.json is loaded?
Consider using the official nprogress plugin https://www.gatsbyjs.org/packages/gatsby-plugin-nprogress/
I'm building a React Native (with Expo) app and have a survey form screen that I want to have appear intermittently for the user to fill out. Let's call it SurveyScreen. I'm doing this by setting a setInterval to poll the backend server hourly for scheduling data to see if the user is due to fill out a survey. This will probably be done in the main App.js in componentDidMount
The above seems straightforward to me. What I'm not clear on is once the polling api determines that the user is due for a survey, how to have the app display SurveyScreen no matter what page the user is on in the app.
One point of clarification is should SurveyScreen appear immediately after receiving a green light api response or should the screen appear after the next user action, e.g. navigation to another page, tap a button, etc? I think either way would be fine at this point. Would love to know both ways if possible.
Any ideas? Thanks.
Update the state.
Example: you subscribe to api => event fires => you update state => survey pops up
You can use portal to easily position survey on top of everything.
What's the best practice of loading data at launching Chrome App?
The landing page of my Chrome App is dependent on some configuration data, which I've stored in the chrome local storage. However, reading chrome local storage is an asynchronous process. Hence, after the App has launched, there is a period of time when the landing page doesn't show correctly.
To avoid this blank time (due to the asynchronous process of reading local storage), I'm thinking about reading data at background JS. However, I haven't googled out what's the best practice to do it.
Anybody has any comments? Thanks.
just listen to the onLaunched event
chrome.app.runtime.onLaunched.addListener(function() {
// load your data
});
Here's one piece of helpful suggestion I've got from the Google Group. Share here so that someone with the same problem might refer to it:
You can read from chrome.storage in the background page and open the window when the data is ready. However, the user experience might be even worse, because instead of the incorrect landing page, you have no user feedback at all.
The usual (and easy to implement) solution is to show your landing page with some visual feedback during data loading, like a spinning wheel with a "Loading" label. If you UI really requires the data to show up, you can add this visual indicator as an opaque div on top of the whole window.
Some people use splash screens, but I don't think it adds to the user experience.
I'm trying to improve the user perception of page load time of some web pages. These web pages take about 5 seconds to complete loading and rendering. The overall time is fine; but on clicking a link to load a page, nothing happens for about 4.5 seconds and then the whole page appears in one shot. This spoils the user experience, since the user is left wondering if anything is happening or not after clicking the link.
As I understand it, browsers are supposed to progressively render web pages as and when the resources available to render portions of the page become available to it. One thing I've seen recommended (by YSlow for eg:) is to put the css in the head and the javascript near the ending body tag - or as near the end of the page as possible. I've done this, but I don't see the initial part of the page rendering and then pausing for the javascript to load. The theory, as I understand it, is that the page will begin rendering progressively once all the CSS is loaded. I also understand that the page will pause rendering when any javascript is being executed/downloaded.
What else can affect progressive rendering on IE, especially on IE7?
I found out that javascript (specifically, some jQuery selectors) were slowing things down and preventing the page from rendering. We first optimized the jQuery code by removing some code which was repeatedly selecting the same elements. Then moved the code down to $.ready so that it executes after the page has loaded.
Overall, this has given us a 2 second boost in page load times as well as allowing more pages to load progressively.
A first step may be to understand what's going on on the network side, a tool like Fiddler will help you. In your case, Timeline display should be a good starting point.
Why not show notifications to users when a link is clicked that the page is currently in loading state.
You can do this:
window.onbeforeunload = function(e){ document.body.innerHTML='loading...';/*or even a better content/* };
I'm having the same load problems because of flash videos on a page. Will somebody tell me why oh my God why can't ie just load pages as nicely as firefox does???
If ie went out of business today, all the hours and days and nights I've wasted would be over.
I think it's about time that ie get with the demands of web maasters in 2009 and change the way they load pages.
If java script is used, people without java will see blank spaces.
Check for unclosed tags.
Check all images have width and height attributes.