I have subscriptions users and product which give about 5000 and 7000 docs respectively. I use the data for typeahead searching in users and product forms. If we subscribe on form render, then the form takes too long to load so we subscribe on Meteor.startup, but that also makes our startup time slow.
How can we make the subscriptions run after the first screen is finished loading without touching the code for the first screen? I don't wanna do subscribe inside firstScreen.onRender() because there can be multiple first screens depending on the url entered.
I tried doing Meter.defer in Meteor.onStartup but that didn't work.
Alternatively, is there a better way to accomplish typeahead with semantic beyond loading all the data?
Any ideas?
I strong recommend you to use the Pattern 'Template-Level Subscriptions' to make sure that you have your data ready to your templates.
Here is the link that explain this -> https://www.discovermeteor.com/blog/template-level-subscriptions/
I hope that helps,
Related
I'm using apollo-client inside Next.js using the setup documented in this example.
To quickly explain, in getServerSideProps(), we create an apolloClient, we do the query and then we use addApolloState() to pass the cache data to the client. Then, inside a component, we can use useQuery() to get the data and render the UI for it.
This works perfectly for queries.
Now, I have a use case where I want my data to reload automatically when it changes on the server. To do this, I'd like to use Subscriptions. However, I still want to have the page rendered on the server on the first load with the right data.
What's the best way to achieve this?
I've tried the approach explained on this issue which consists in using subscribeToMore and override the whole query when a result arrives. However, it's not ideal as the subscription is still fired on the first page load and receives the same data than the one already in the cache.
Situation:
I have an 'Event' item that you can click on --> Event detail screen.
That has individual subitems (date,participants,description) in the form of a list.
I load the subitems with a Future Builder into a Listview.builder with a List Tile like so:
I have a button to edit the location, it saves to the database and locally updates the location variable. This calls SetState().
The full list is updated, even if some tiles don't have changes.
THE PROBLEM
Some tiles, like the participants tile needs to load pictures and some other things that are time intensive. So even if I just change the location and update the list, everything reloads, consuming resources and taking too much time to load a simple string.
WHAT I AM LOOKING FOR
Is it possible to reload only a certain list tile? Would you use another widget instead of ListView.builder? Other logic? Any help is appreciated.
Answer Extension [Update]
The marked answer is correct. I was using future builder and that was forcing me to reload all data always. By using different Streams with Streambuilder I am able to change data on database and it automatically changes on the UI, without updating the state! Magic.
base on what i notices, Future Builder is the problem, Future builder rebuild the whole widget in the ListView.builder. in your case use StreamBuilder and you see the changes you what...
I have to mock up a ticking dashboard which is part of a proposal. I am looking for ideas other than the HTTP Refresh option that I am thinking of. The objective is to quickly mock up a look and feel and a working dashboard that ticks over. It only had to provide new content every five seconds. EG there are a bunch of KPI's and their outputs which are percentages have to be updated..
A simple bunch of HTML pages using HTTP Refresh is on my mind. Is there a better option anyoine can think of. EG can HTML5 do this better? Is CSS an option? Thank you in advance for any ideas
I would be going for an ajax call back to the server to get the latest update and then embed that wherever it needs to go - you could set the ajax function on a timer to run every 5 seconds or 1 second or whatever. This way your entire page is not being refreshed, and additionally you can be calling back to the server for a new update even while the previous on is still being rendered.
Downside is that you won't have a page history (i.e. the users will not be able to navigate 'back' to previous ajax updates) unless you explicitly create one; I can't see that being necessary though.
Please post a comment if you need more info about ajax.
I have recently created an application where a lot of data is loaded into objects when the application starts up, and other data as it is required. For example if the user requests the catalogue page then it will load all the top level category data into objects of type Category. This will then stay there to be used by other users (who will therefore not have to load this data into objects) and can be altered by admin if they happen to login during the same application instance. I know this is not the most efficient solution, as pointed out below, but it works and the page load, at the moment, is not too long. It is very quick if most of the required data is already loaded into objects. It is also tailored to the business' needs - unlike other techniques such as Linq-to-SQL.
The problem I am facing is when a page is requested which requires lots of data to be displayed about different types of object. For example when a catalogue page is requested which displays information on a product which can be bought, it then loads all the products and categories (as the products make reference to the category object, not just the category name).
I would like to display a loading symbol with a message whilst all this data is being loaded into objects, so the user knows its not just in a loop or anything. Is there any way to do this? I am open to using JS / jQuery if I need to.
Thanks in advance.
Regards,
Richard
PS I am working on ways to make it more efficient - such as using HashTables or HashMaps. However this is taking time as there are so many different types of item (News, Events, Catalogue Item - Range, Collection, Design, RangeCollection, CollectionDesign, RangeCollectionDesign and RangeDesign - Users, PageViews and the list goes on).
Please correct me if I'm wrong, but I do believe that Javascript is required in order to display a "loading" image... Using server-side scriping alone would typically require an entire page load after all the content loads unless you want to start messing with IFrames.
This is a job for AJAX. A common solution to your problem is to have a small page that displays a loading icon. The page has some JavaScript that makes additional HTTP requests to the server to download the rest of the page. JQuery has a "$.ajax" method that is designed to simplify this process.
I would suggest looking at the documentation to the .ajax method in the jQuery documentation. Unfortunately, it seems to be a rather delicate process to get all the scripting code right and it takes a while to learn it all.
I have this GUI that shows, let's say Customer Orders. When my client nailed down the requirements, he asked me to keep pagination like this,
Show Items Per Page : 10/50/150
For each customer there could be thousands of orders and each order will have atleast 50 attributes to show up in the screen. So, assume a 50 column html table with 2000 or 3000 records associated with it spanning across multiple database tables (anyway, this is a different story)
Things were breeze until yesterday, now my client has come up with new change requests, in that he specified Show Items like this,
Show Items Per Page : 10/50/150/All
Yes, he wanted to see 2000 or 3000 records by just select "All" option. Internally, this is not a big change, I would go back and remove the filters I apply on rowcount etc., but when it is loaded in GUI it really sucks ... view state was huge etc., etc.,
I know, this is a standard problem. How you guys deal with it? I cannot convince my client to remove this "All" option, he got stick to it. (the reason is simple, he got a big 42" screen where he can easily see 1000 items in one page)
I also tried to use javacript to prepare DOM in a ajax call .. but still, inserting 2000 TDs is really slow.
Any help is greatly appreciated.
Some Extra Info
This application is a intranet application or else accessed through VPN connection
This problem is about browser performance.
I suppose you can do two things.
1) you can use <div> instead of <table> (this is possible with CSS) because browser do not render table until closed tag. So it will take long to load page but it will render first results faster.
2) If you use Ajax+Json and render every <tr> piece by piece, you can render whole thing and only than put it in DOM. That will be faster because browser will not render every time you put another row
If you want you can load the data in sort of installments. Sort of like how pagination works but it is not quite pagination to be precise. You can label your installments/pages with a proper ID. Load the page one after another via ajax calls. You can even show a progress bar to show how much data is actually loaded. Append this data to the table you are displaying the data in. I would not go about using server controls for this...you have to handle this via javascript or jquery.
You might want to append table rows incrementally.
When client scrolls close to page bottom - fire an ajax call, return next page and render it.
But best solution would be to convince your client - this is not how web applications works. We had similar situation - pure nightmare.
Instead of an ASP.NET GridView, you'd be better to use a DataRepeater.
Better yet, if you are not constrained by technology, you can use Microsoft Ajax Preview 4 with WCF REST Services. You would just need to find some hacks to "stream" data from the service and display it.
Also there is JQuery Grid (if you don't want to use Microsoft Ajax Preview 4) that supports JSON serialization.