This is a conceptional question, in this case a component is a screen, if that makes sense
Is there a good solution for fluently preloading a component? What I mean by that is perhaps calling a portion of a component, before opening up the view
an example of this is say, snapchat stories, when greyed out on press will simply load. The second press then opens up the view. Essentially allows you to preload before then navigation to the view
Is this a Redux task? Does anyone have an example?
Seems like some concepts are mangled in your mind. What you are trying to achieve is not to preload components, rather run logic before drawing anything on the screen OR preloading some media. Therefore, what you need to do is not to preload anything, but to seperate your logic from your view (let's say video data from showing video itself), retrieve / prepare data (download video for example) and after it is ready show your component.
Also, if what you are trying to preload is just media, you should checkout react-preload.
Related
Let's say I have a blazor component that uses a lot of resources to create an animation, it doesn't make sense to keep rendering it if the user scroll past the component (i.e. the component not visible in the screen). Is there a way to detect this using Blazor?
I am aware that I can rely on Intersection Observer API with JS, but I am looking for something in Blazor/C#.
Thanks,
We use wix/react-native-navigation and tried to use Context API from react.We need all the screenshots to receive data and when changing in one place, there is a change in all places.The api context is not suitable, it makes a context for each screen, that is, when changed in 1 screen, the data will not be rerender in another. I would also not like to use Redux since editors are not signed in all screenshots, and it’s too difficult to forward props.
Does anyone have any ideas how to solve this problem?
This seems to be a case for the model view controller pattern.
Each screen would be a view in this pattern. You need to trigger a rerender when the data changes. You can define functions in the react context (model) and then reference it in your lifecycle methods (controller) of your different views.
I've got a app that has a collection of scenes, and make many calls to a remote server that because they control hardware can take quite a while. In my redux store I have a variable that represents if there are any requests inflight.
What I'm trying to achieve is having a spinner or loading scene defined in a single place, and having automatically show dependent on the state of variable in the redux store.
I think that the answer lies in having a modal scene for the loading page, but the bit I'm missing is how to have it automatically displayed (and hidden) based from the state in the store. I don't want to call Actions.loadingScene() from all the places that makes the requests.
I've got a reducer in place that see's all the actions (both the application and the RNRF actions), but I couldn't work how what state I had to mutate to get it to display the modal scene.
Any pointers would be great!.
It appears that redux-saga would be the way to solve this, however I ended up making a HOC that adds the spinner, and displays it when required. It does mean that I have to remember to wrap all scenes with the HOC but that it OK.
I'm completelly newbie on react and react-native. So i ask to forgive me for possibly stupid question.
I use redux with react-native-router-flux.
First of all, let me describe the behavior what I want.
I have a scene that shows some info about video. The data is fetching from http page. The video have links to another videos - something like "related videos".
On the related video link clicked I need to open new similar scene but vith info of this new video. This vide have relateds too and so on.
So that's what I trying.
A have one scene with key=film. It renders all the info about video. The info fetchs from remote server. On fething it uses this.props.key to identificate the video page. On related video click I called Action.film({key: NEW_VIDEO_KEY}) and new scene opens, takes new data from fetch and shows new video info. And so on. I do this 5 times for example. So 6 scenes was opened (with the first one). But after pressing the BACK button all previous scenes shows the same info as the last one.
I think, it's because of react-router-flux does not remember scenes data but only the route. Each opened scene was modified props, so after the last scene it hase the last props.
I don't understand how to implement needed behavior as I describe at the beginning.
May be I need to add something like history object to the state and after each opened scene push video object to it and on pop scene pop the last video object from the history object... And return the previous object to the previous scene with Action.pop({video: VIDEO_OBJECT})...
But if I showing the related videos in listview I need to save the scroll position of each scene (( And what about hardware back button...
May be I understand something wrong and there is a more complex and simple way...
Ok. I found a problem. the problem was in my misunderstanding how all things works together. Now it works well as needed.
Let's say I have an app built like the Microsoft weather app.
On launch of app I need to download the forecast from the internet. While waiting to do so I also need to display a progress indicator. Which of the following (if any) is recommended?
Render the page fully with navigation controls (hamburger side menu) as well as page content (but without values since they are data bound). Then overlay a modal control like a popup with a progress indicator inside and a cancel button.
Render only the application root shell with the progress indicator inside (no other content, or navigation controls like hamburger menu are visible). Then once the task is complete, navigate to the home page with content.
Render the home page with content and navigation controls, but hide only the content (with visibility = collapsed) and show a progress indicator in its place. Once data is downloaded hide the progress indicator, and show the content.
I don't know which one of these I'm supposed to use. Is there a recommended way to do this?
Or is there a better way I didn't think of?
There is no one perfect answer for this question but I will try to explain the most common solution. None of points above is good or bad. It is better to concentrate on the user experience.
Render fully page with navigation controls and display loading popup is not really bad idea - user see the whole page with progress ring for instance and has chance to cancel it. But remmber that if data is not loaded or user abort pulling it there will be empty content in the app (if this is first time when user launched the app).
One of the best solutions for scenario you wrote is to use extended Splash Screen. Once you app is launched first Splash Screen is displayed and when you extend it, you can add progress ring to indicate that data is being retrieved.
This is very elegant way to present to the user.
Please see below guidline how to do it:
UWP Extended splash screen