Merge pull request #298 from matrix-org/dbkr/velocity_mem_leak2

Second attempt at fixing the Velocity memory leak

package.json

@@ -37,8 +37,7 @@
     "react-dom": "^15.0.1",
     "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e",
     "sanitize-html": "^1.11.1",
-    "velocity-animate": "^1.2.3",
-    "velocity-ui-pack": "^1.2.2"
+    "velocity-animate": "vector-im/velocity#a70ebc7"
   },
   "//babelversion": [
     "brief experiments with babel6 seems to show that it generates source ",

src/Velociraptor.js

@@ -117,7 +117,8 @@ module.exports = React.createClass({
             // and the FAQ entry, "Preventing memory leaks when
             // creating/destroying large numbers of elements"
             // (https://github.com/julianshapiro/velocity/issues/47)
-            Velocity.Utilities.removeData(this.nodes[k]);
+            var domNode = ReactDom.findDOMNode(this.nodes[k]);
+            Velocity.Utilities.removeData(domNode);
         }
         this.nodes[k] = node;
     },

src/components/structures/MessagePanel.js

@@ -86,6 +86,10 @@ module.exports = React.createClass({
         // to manage its animations
         this._readReceiptMap = {};
 
+        // Remember the read marker ghost node so we can do the cleanup that
+        // Velocity requires
+        this._readMarkerGhostNode = null;
+
         this._isMounted = true;
     },
 
@@ -422,9 +426,16 @@ module.exports = React.createClass({
     },
 
     _startAnimation: function(ghostNode) {
-        Velocity(ghostNode, {opacity: '0', width: '10%'},
-                 {duration: 400, easing: 'easeInSine',
-                  delay: 1000});
+        if (this._readMarkerGhostNode) {
+            Velocity.Utilities.removeData(this._readMarkerGhostNode);
+        }
+        this._readMarkerGhostNode = ghostNode;
+
+        if (ghostNode) {
+            Velocity(ghostNode, {opacity: '0', width: '10%'},
+                     {duration: 400, easing: 'easeInSine',
+                      delay: 1000});
+        }
     },
 
     _getReadMarkerGhostTile: function() {

src/components/views/login/RegistrationForm.js

@@ -18,7 +18,7 @@ limitations under the License.
 
 var React = require('react');
 var Velocity = require('velocity-animate');
-require('velocity-ui-pack');
+require('velocity-animate/velocity.ui');
 var sdk = require('../../../index');
 var Email = require('../../../email');
 var Modal = require("../../../Modal");