Base chargement des icons des applications

js/components/app-list.jsx

@@ -4,24 +4,38 @@ var AppItem = require('./app-item.jsx');
 module.exports = React.createClass({
 
   propTypes: {
+
+    // The app items to display in the list
     items: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
+
+    // the parent item path
     parentPath: React.PropTypes.oneOfType([
       React.PropTypes.string,
       React.PropTypes.arrayOf(React.PropTypes.number)
     ]).isRequired,
+
+    // Item click handler
     onItemClick: React.PropTypes.func.isRequired,
+
   },
 
   render: function() {
 
     var parentPath = this.props.parentPath;
+
+    // For each items, we create an AppItem component
     var items = (this.props.items).map(function(item, i) {
+
+      // The item path identifier
       var path = parentPath+'.'+i;
+
       return (
         <AppItem key={path} itemPath={path} item={item} onItemClick={this.props.onItemClick} />
       );
+
     }.bind(this));
 
+    // Create the apps list
     return (
       <ul key={parentPath} className="apps-list">
         {items}

js/components/desktop-app-item.jsx

@@ -1,10 +1,21 @@
 var React = require('react');
 var Util = require('../util');
+var LazyLoad = require('./mixins/lazy-load');
 
 module.exports = React.createClass({
 
+  mixins: [LazyLoad],
+
   getInitialState: function() {
-    return { icon: '' };
+    return { icon: 'img/hourglass.svg', loading: false };
+  },
+
+  onInViewport: function() {
+    if(!this.state.loading) {
+      this.setState({ loading: true });
+      var desktopEntry = this.props.desktopEntry;
+      this._findIcon(desktopEntry.Icon);
+    }
   },
 
   render: function() {
@@ -13,18 +24,9 @@ module.exports = React.createClass({
     var label = desktopEntry.Name;
     var category = desktopEntry.Categories;
 
-    // Search for best icon
-    var icon = '';
-
-    if(!this.state.icon) {
-      this._findIcon(desktopEntry.Icon);
-    } else {
-      icon = this.state.icon;
-    }
-
     return (
       <li className="desktop-app">
-        <img src={icon} className="desktop-app-icon" />
+        <img src={this.state.icon} className="desktop-app-icon" />
         <span className="desktop-app-label">{label}</span>
       </li>
     );
@@ -33,12 +35,12 @@ module.exports = React.createClass({
 
   _findIcon: function(iconPath) {
 
-    var desktopEntry = this.props.desktopEntry;
+    var self = this;
 
-    Util.DesktopApps.findIcon(iconPath)
+    Util.DesktopApps.findIcon(iconPath || 'application-default-icon')
       .then(function(iconPath) {
-        this.setState({ icon: iconPath });
-      }.bind(this))
+        self.setState({ icon: iconPath });
+      })
     ;
 
   }

js/components/desktop-app-list.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var Util = require('../util');
 var DesktopAppItem = require('./desktop-app-item.jsx');
+var path = require('path');
 
 module.exports = React.createClass({
 
@@ -12,6 +13,10 @@ module.exports = React.createClass({
 
   componentDidMount: function() {
     // Load system desktop apps
+    var baseDirs = global.process.env.XDG_DATA_DIRS.split(':').map(function(baseDir){
+      return path.join(baseDir, 'applications');
+    });
+
     Util.DesktopApps.loadAllDesktopFiles('/usr/share/applications')
       .then(function(desktopFiles) {
         this.setState({ desktopFiles: desktopFiles });

js/components/mixins/lazy-load.js

@@ -0,0 +1,55 @@
+var React = require('react');
+
+module.exports = {
+
+  isInViewport: function() {
+
+    var el = React.findDOMNode(this);
+
+    if(!el) return false;
+
+    var rect = el.getBoundingClientRect();
+
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (global.window.innerHeight || global.document.documentElement.clientHeight) && /*or $(window).height() */
+      rect.right <= (global.window.innerWidth || global.document.documentElement.clientWidth) /*or $(window).width() */
+    );
+
+  },
+
+  componentDidMount: function() {
+
+    function _onInViewport(){
+      if( this.isInViewport() ) {
+        this.onInViewport();
+      }
+    }
+
+    var el = React.findDOMNode(this);
+
+    if(typeof this.onInViewport === 'function') {
+      el.parentNode.addEventListener('scroll', debounce(_onInViewport.bind(this), 250));
+    }
+
+    _onInViewport.call(this);
+
+  }
+
+};
+
+function debounce(func, wait, immediate) {
+  var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+}