feat(Services): Improve performance when reordering services

2 files changed, 7 insertions, 1 deletions

diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index e4a9d60c3..075bd5e34 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -94,7 +94,7 @@ export default class AppLayoutContainer extends Component {
 
     const servicesContainer = (
       <Services
-        services={services.allDisplayed}
+        services={services.allDisplayedUnordered}
         handleIPCMessage={handleIPCMessage}
         setWebviewReference={setWebviewReference}
         openWindow={openWindow}
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index c38d0d9ee..c2dbff55d 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -87,6 +87,12 @@ export default class ServicesStore extends Store {
     return this.stores.settings.all.showDisabledServices ? this.all : this.enabled;
   }
 
+  // This is just used to avoid unnecessary rerendering of resource-heavy webviews 
+  @computed get allDisplayedUnordered() {
+    const services = this.allServicesRequest.execute().result || [];
+    return this.stores.settings.all.showDisabledServices ? services : services.filter(service => service.isEnabled);
+  }
+
   @computed get filtered() {
     return this.all.filter(service => service.name.toLowerCase().includes(this.filterNeedle.toLowerCase()));
   }