Load model data after page is loaded?

  • 3
  • Idea
  • Updated 2 years ago
  • Planned
Is there a way to load a model or models after the page has been loaded?  I have a sidebar with 4 different models in it for easy access to items for my team, problem is that if those 4 models load initially, it really slows the page down.  I created a button to "Load Sidebar" but users are not using it, thus the sidebar has become pretty useless.

What method can I take to load the models after the rest of the page has finished loading, thus not slowing down the initial page load, and still providing the data to users?
Photo of Tyler Neal

Tyler Neal

  • 760 Points 500 badge 2x thumb

Posted 2 years ago

  • 3
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I've used page includes to achieve this in the past.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Pat's advice about Page Includes is good, the only other declarative approach is to have the Models' data loaded later via user interaction (such as when an initially-hidden tab is first shown, or in response to a button press as you tried in your approach.

I have converted this Question to an Idea because it is on our roadmap to provide a declarative way to allow "lazy-loading" of Model data after initial page load.

The only other approach is to use JavaScript, you can trigger the loading of the Models' data as soon as the page has initially rendered like this:

(function(skuid){
   skuid.$(".nx-page").one("pageload", function(){
      // Names of Models to lazy load
      var modelsToLazyLoad = [
          "Contacts",
          "Tasks",
          "OtherStuff"
      ];
      skuid.model.load(skuid.$.map(modelsToLazyLoad, function(modelName) {
          return skuid.model.getModel(modelName);
      });
   });
})(skuid);
(Edited)