Merge pull request #2115 from matrix-org/bwindels/ll_toggle

Lazy loading: feature toggle

src/components/structures/UserSettings.js

@@ -844,8 +844,16 @@ module.exports = React.createClass({
         SettingsStore.getLabsFeatures().forEach((featureId) => {
             // TODO: this ought to be a separate component so that we don't need
             // to rebind the onChange each time we render
-            const onChange = (e) => {
+            const onChange = async (e) => {
-                SettingsStore.setFeatureEnabled(featureId, e.target.checked);
+                const checked = e.target.checked;
+                if (featureId === "feature_lazyloading") {
+                    const confirmed = await this._onLazyLoadChanging(checked);
+                    if (!confirmed) {
+                        e.preventDefault();
+                        return;
+                    }
+                }
+                await SettingsStore.setFeatureEnabled(featureId, checked);
                 this.forceUpdate();
             };
 
@@ -855,7 +863,7 @@ module.exports = React.createClass({
                         type="checkbox"
                         id={featureId}
                         name={featureId}
-                        defaultChecked={SettingsStore.isFeatureEnabled(featureId)}
+                        checked={SettingsStore.isFeatureEnabled(featureId)}
                         onChange={onChange}
                     />
                     <label htmlFor={featureId}>{ SettingsStore.getDisplayName(featureId) }</label>
@@ -878,6 +886,30 @@ module.exports = React.createClass({
         );
     },
 
+    _onLazyLoadChanging: async function(enabling) {
+        // don't prevent turning LL off when not supported
+        if (enabling) {
+            const supported = await MatrixClientPeg.get().doesServerSupportLazyLoading();
+            if (!supported) {
+                await new Promise((resolve) => {
+                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                    Modal.createDialog(QuestionDialog, {
+                        title: _t("Lazy loading members not supported"),
+                        description:
+                            <div>
+                         { _t("Lazy loading is not supported by your " +
+                            "current homeserver.") }
+                            </div>,
+                        button: _t("OK"),
+                        onFinished: resolve,
+                    });
+                });
+                return false;
+            }
+        }
+        return true;
+    },
+
     _renderDeactivateAccount: function() {
         return <div>
             <h3>{ _t("Deactivate Account") }</h3>

src/i18n/strings/en_EN.json

@@ -1216,5 +1216,8 @@
     "Import": "Import",
     "Failed to set direct chat tag": "Failed to set direct chat tag",
     "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
-    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room"
+    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room",
+    "Increase performance by only loading room members on first view": "Increase performance by only loading room members on first view",
+    "Lazy loading members not supported": "Lazy load members not supported",
+    "Lazy loading is not supported by your current homeserver.": "Lazy loading is not supported by your current homeserver."
 }

src/settings/Settings.js

@@ -21,7 +21,7 @@ import {
     NotificationBodyEnabledController,
     NotificationsEnabledController,
 } from "./controllers/NotificationControllers";
-
+import LazyLoadingController from "./controllers/LazyLoadingController";
 
 // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times
 const LEVELS_ROOM_SETTINGS = ['device', 'room-device', 'room-account', 'account', 'config'];
@@ -85,8 +85,10 @@ export const SETTINGS = {
     },
     "feature_lazyloading": {
         isFeature: true,
-        displayName: _td("Increase performance by loading room members on first view"),
+        displayName: _td("Increase performance by only loading room members on first view"),
         supportedLevels: LEVELS_FEATURE,
+        controller: new LazyLoadingController(),
+        default: false,
     },
     "MessageComposerInput.dontSuggestEmoji": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,

src/settings/SettingsStore.js

@@ -248,7 +248,7 @@ export default class SettingsStore {
         if (actualValue !== undefined && actualValue !== null) return actualValue;
         return calculatedValue;
     }
-
+    /* eslint-disable valid-jsdoc */    //https://github.com/eslint/eslint/issues/7307
     /**
      * Sets the value for a setting. The room ID is optional if the setting is not being
      * set for a particular room, otherwise it should be supplied. The value may be null
@@ -260,7 +260,8 @@ export default class SettingsStore {
      * @param {*} value The new value of the setting, may be null.
      * @return {Promise} Resolves when the setting has been changed.
      */
-    static setValue(settingName, roomId, level, value) {
+    /* eslint-enable valid-jsdoc */
+    static async setValue(settingName, roomId, level, value) {
         // Verify that the setting is actually a setting
         if (!SETTINGS[settingName]) {
             throw new Error("Setting '" + settingName + "' does not appear to be a setting.");
@@ -275,11 +276,12 @@ export default class SettingsStore {
             throw new Error("User cannot set " + settingName + " at " + level + " in " + roomId);
         }
 
-        return handler.setValue(settingName, roomId, value).then(() => {
+        await handler.setValue(settingName, roomId, value);
-            const controller = SETTINGS[settingName].controller;
+
-            if (!controller) return;
+        const controller = SETTINGS[settingName].controller;
+        if (controller) {
             controller.onChange(level, roomId, value);
-        });
+        }
     }
 
     /**

src/settings/controllers/LazyLoadingController.js

@@ -0,0 +1,29 @@
+/*
+Copyright 2018 New Vector
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import SettingController from "./SettingController";
+import MatrixClientPeg from "../../MatrixClientPeg";
+import PlatformPeg from "../../PlatformPeg";
+
+export default class LazyLoadingController extends SettingController {
+    async onChange(level, roomId, newValue) {
+        if (!PlatformPeg.get()) return;
+
+        MatrixClientPeg.get().stopClient();
+        await MatrixClientPeg.get().store.deleteAllData();
+        PlatformPeg.get().reload();
+    }
+}