I'm pulling from an API that takes like 30 seconds to load in the data. Right now I have a loading widget that displays while the API is fetching data. But I was curious if there is a way to show the previous data while the updated data is fetching?
For example, let's say I'm pulling in total payout. The total payout was $100,500. Then, at the next fetch it's $100,501. Then $100,502. Is there a way I can display the old number while the new number is being fetched (as opposed to displaying a loading widget)?
Related
I am currently building a calendar schedule view feature, where I have Month title as Header and the days as the items. I am currently fetching calendar event of about 6 weeks. which if the data is not present or so, it would still cover up the page and I can use onScrollEnd to query more data via useQuery.
But, I am trying to optimize my calendar feature and querying 6 weeks worth of events would not be ideal and would take time to load. thus, I was trying to find a way, where, if I can query let's say 1 week worth of data, if that does not have enough data (like 1-2 events) to cover the screen (for user to invoke onScrollEnd), then query next batch and so on and at the end wrapping the container with memo in order to help boost the load speed and lazy load data as required. Any idea how would this be possible?
I have looked at various examples of lazy loading such as:
https://snack.expo.dev/#johnborges/044274
etc, but my problem is that in these code examples, they do not cover the possibility of first or second batch/ page to have less data and querying for next page automatically.
I also thought of using FlatList nested with SectionList, but ended with conclusion that it would not be possible and data would be rendered twice.
What I want to happen:
<Schedule> --> component
render → Coordinate which Month in the SectionList should paginate through the events
<SectionList>
onEndReached → create more months
<Month>
<FlatList>
render → <Event />
onEndReached → fetch more events
<FlatList>
</Month>
</SectionList>
<Schedule>
So there are two "onEndReached" triggers, one to create more months when the user scrolls down the entire page and a second to get more events, when the user scrolls down the current month.
The Month component should just load 1 weeks worth of events at a time and paginate as the user is scrolling.. I somehow need some way to figure out that if the current week does not have enough data to cover the screen then query more data, and so one as always show the full page... Any help/ ideas would be appreciated. Thanks :).
I would try to measure the y position of the last element. If the y position is not close enough to the bottom, fetch more items. Store the previous fetch in the state. Add to that state the new fetch.
I have built an app that fetches a list of posts based on selected category.
When the category changes I reset state and load a new set of posts based on the new category. I use componentDidMount() to call a fetch data function based on category and componentDidUpdate(prevProps) to check if a new category has been selected. If so I reset data and call the data function again. This works fine except I only want to call the first 50 entries. If a customer triggers an event (window scroll or clocks load more data button) I then want to load and display the next 50 records. This is where I am struggling. any suggestions on the the best way of implementing this?
I'm currently developing an web app to keep track of cash flow. Every day an employee counts the amount of coins in the checkout and enters the respective amounts in a form called "Protokoll". These "Protokolls" are displayed in a list which is fetched from a node server. When an item is clicked a new request to the server is performed to get the amounts and display them in a form.
My question is: What is the best/correct way to handle my data?
Should I request the data once when the list is loaded and then pass the respective data to the clicked item or is it okay to use my current method, where the data is fetched again for each individual item?
I am using react with redux for development.
I have around 20000 rows in database. I need to display list to users on screen, 10 rows at a time. I also have sorting and filters applied to the list.
I can think of 2 options
Store only UI state of component in the redux state and bring data for each page using ajax/fetch. This way all sorting and filters are applied on server end and i get only 10 rows to display at a time.
Bring all data once to redux state and display 10 records. This way we do not request server for data again, as all sorting and filters are applied within data stored in state
What is better option/practice?
I have a big data portion that I would like to post in a table. However, the data should be sorted and paginated. I know I am able to pass the whole data to the client at once and then paginate it using angular, but this will be too slow. I prefer to pass the data page-by-page, so one the client want to open a page from a table to load the data for it.
Up until now I have created an API that returns me the data that I need, based on the page number and the number of rows on the page. However, I don't know how to use it with AngularJS.
Can you please help me?
It looks like a backend problem. If you are using a standard restful backend, use the limit/skip parameters, you can encapsulate into a paginate.
Example:
localhost:1337/dataTable?skip=0&limit=100
localhost:1337/dataTable?skip=100&limit=100
localhost:1337/dataTable?skip=200&limit=100
...
On the frontend use a table object like ng-Table, and use the pages to keep track of the offset, the page number and the total items available.
skip = (pagNum - 1 * pageSize)
limit = pageSize
Make your backend return you the page you want plus the available dataNumber so you can build the pages controller.
Documentation for skip/limit on sails
http://sailsjs.org/documentation/reference/waterline-orm/queries/limit
http://sailsjs.org/documentation/reference/waterline-orm/queries/skip
Best approach is to keep track of the limit and offset in your controller. Then when user selects new page (offset) or changes items per page (limit), update the corresponding values and use them to make a new http request.
You could call a function on ng-change of a dropdown and that drop down would contain values of page number and number of records to fetch. Or you can provide two text boxes one for page number other for number of records and keep a button and on its ng-click event that will take value of those text boxes and post to your server and bring back data based on new values in text boxes