add lazy-loading support for files. Initialization takes too much time.

[mayur-padshala]

Does anyone other than me not think that the app takes too long to load? We can reduce the load time by adding support for lazy-loading files. ocLazyLoad

[ugurozturk]

Not really, on my laptop it is as fast as enough

[lugovsky]

@mayur-mi Are you taking about development version or dist version? Dist version loads comressed vendor and app scripts and should be fast enough.

[mayur-padshala]

@lugovsky @ugurozturk ocLazyLoad actually pulls in files like css, views, JS-dependencies only when needed. We can save a lot of data transfer and bandwidth usage with that. I was just wondering why do we need to load all the stuff if we need only some to render a page and make it functional ?

[lugovsky]

@mayur-mi I still don't quite understand are you talking about development or production mode? Just to clarify, when you run gulp serve app is started in development mode, when you run gulp serve:dist - it's being run in production mode. Production mode concats all javascripts in single file.

If you talking about production mode, I think correct way is to have all you javascripts loaded at once like we have it right now. In other case, when you navigate through app and click on some link on sidebar for example, you need be able to instantly load that page. In case you would not have some javascript files loaded at that moment, user will have bad experience, because he would need to wait for them to load. From user's perspective it means app works slowly.

[brijesh1ec]

oc lazy load will load all the files .js, .css or images files on the fly(dynamically). using oclazyload.js file makes the user to modularization the application

[vazh]

@lugovsky just for some data, i've got a 1-1.5mbps connection.

1. Regular:
   • Load: 46.33s
   • Size: 5.6 MB
2. Mint:
   -Load: 1.7m
   -Size: 6.3 MB
   i'm using your demo page for each version to test it.
   personally that is far too long just waiting for the initial page to load.
   so i think its not a bad idea to add lazyLoad for application example

[bremme]

First of all, thanks for sharing such a great theme with the community! I played around with it last night and I'm thinking of using it for a small project. But I'm also in doubt because loading of the theme takes a bit too long in my opinion.

I'm trying to figure out why it takes soo long too load. I tested three different scenarion:

1. gulp serve the full theme
2. stripping the theme, removed all pages exccept the dashboard and using gulp serve
3. same stripped theme running gulp and serving the release dir using express.

For all three cases I had a look on the Timeline and the Network tab from within the Chromium developer tools, these are the results:

1: full theme gulp serve

• Total: 4.94 s
• Idle: 3.60 s

• Finish: 6.16 s
• Load: 1.83 s
• 272 requests
• 8.8 MB

2: stripped theme gulp serve

• Total: 4.24 s
• Idle: 3.05 s

• Finish: 5.95 s
• Load: 1.11 s
• 167 requests
• 7.3 MB

3: stripped theme, served using express

• Total: 3.69 s
• Idle: 3.02 s

• Finish: 5.81 s
• Load: 0.82 s
• 51 requests
• 5.0 MB

In all three cases by far the most time is idle (about 3 seconds), this looks like the root cause of the long loading times. If this idle time can somehow be shortened or removed completely the theme would be much faster.

Does anybody has a suggestion on the cause of this behavior?
Is there anything more I can test perhaps?

Other then that I, I see the theme comes bundles with many bower libraries, how would I not load the libraries which I'm not using for my project?

[bremme]

I guess this is NOT the way to do it, but when I lower the timeouts in theme.run.js to 50ms. The theme will display the dashboard much faster (<= 1 s) and the idle time is cut in half. I don't know if there are any negative (side) effects of doing this? But it might help in finding the root cause of this problem.

Below another screenshot of the Timeline for the full theme, served using gulp serve.

And these are the changes I made:

  function themeRun($timeout, $rootScope, layoutPaths, preloader, $q, baSidebarService, themeLayoutSettings) {
    var whatToWait = [
      preloader.loadAmCharts(),
      $timeout(50)
    ];

    var theme = themeLayoutSettings;
    if (theme.blur) {
      if (theme.mobile) {
        whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-mobile.jpg'));
      } else {
        whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg.jpg'));
        whatToWait.unshift(preloader.loadImg(layoutPaths.images.root + 'blur-bg-blurred.jpg'));
      }
    }

    $q.all(whatToWait).then(function () {
      $rootScope.$pageFinishedLoading = true;
    });

    $timeout(function () {
      if (!$rootScope.$pageFinishedLoading) {
        $rootScope.$pageFinishedLoading = true;
      }
    }, 50);

    $rootScope.$baSidebarService = baSidebarService;
  }

[bremme]

Thinking about it, if I understand the code correctly, loading the AmChart module has a default timeout of 3000 ms. This is quite similar to the idle times I'm experiencing. Could this lead in the right direction?

[vazh]

@bremme just remove dependencies on bower.json & module.js that you don't need.

i remove most dependencies like chart, etc. only keep what i deemed useful

[bremme]

@vazh thanks! I figured it must be something like that, I'll have a look.

[vazh]

@bremme becareful though, you need to modify few files to make it works. since this theme incorporate those module directive, etc inside /themes usually. you'll see the error when you run gulp serve.

[lugovsky]

Hey @bremme

The timeout of 3000ms was used only for demo purposes. You can remove it if you don't need it. The important thing is to keep AmChart preload promise, if you use amcharts.

[bremme]

@lugovsky Thanks for your reply! So the timeout was put in there to show (demonstrate) the loading spinner and can/should be removed for production. I can image that other people don't need it. You could think about removing it or setting it to 500-1000 ms or perhaps make a note of it in de documentation. It took me a little while to figure this out, but maybe a more experiences angularJS/javascript developer would find it quicker. At least I learned something -> when your page has a large idle time -> look for timeouts:)