Second attempt at fixing the Velocity memory leak

1) Correct fix for Velociraptor (we need to find the DOM node and pass that in)
2) Do the same leak fix for the read marker
3) Update the dependency to our fork which is fixed to make the call we do to release memory actually work.
4) Remove the velocity-ui-pack dependency which is unnecessary because velocity-ui is included in the velocity package

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-animate": "vector-im/velocity#a70ebc7"
-    "velocity-ui-pack": "^1.2.2"
   },
   "//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%'},
+        if (this.readMarkerGhostNode) {
-                 {duration: 400, easing: 'easeInSine',
+            Velocity.Utilities.removeData(this.readMarkerGhostNode);
-                  delay: 1000});
+        }
+        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");