diff --git a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
index 33babfe0..58074b2d 100644
--- a/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
+++ b/lib/gui/components/drive-selector/templates/drive-selector-modal.tpl.html
@@ -5,7 +5,7 @@
- -
diff --git a/lib/gui/models/drives.js b/lib/gui/models/drives.js
index fc287965..204a8fb2 100644
--- a/lib/gui/models/drives.js
+++ b/lib/gui/models/drives.js
@@ -65,6 +65,28 @@ Drives.service('DrivesModel', function() {
});
};
+ // This workaround is needed to avoid AngularJS from getting
+ // caught in an infinite digest loop when using `ngRepeat`
+ // over a function that returns a mutable version of an
+ // ImmutableJS object.
+ //
+ // The problem is that everytime you call `myImmutableObject.toJS()`
+ // you will get a new object, whose reference is different from
+ // the one you previously got, even if the data is exactly the same.
+ const memoizeImmutableListReference = function(func) {
+ let previous = [];
+
+ return function() {
+ const list = func.apply(this, arguments);
+
+ if (!_.isEqual(list, previous)) {
+ previous = list;
+ }
+
+ return previous;
+ };
+ };
+
/**
* @summary Get detected drives
* @function
@@ -75,9 +97,9 @@ Drives.service('DrivesModel', function() {
* @example
* const drives = DrivesModel.getDrives();
*/
- this.getDrives = function() {
+ this.getDrives = memoizeImmutableListReference(function() {
return store.getState().toJS().availableDrives;
- };
+ });
});