[gnome-shell] overviewControls: Hide the appDisplay when it's not shown

[Marge Bot <marge-bot src gnome org>]

commit c239cd398d45cd4364cbd57e973c982cd99dfdc5
Author: Jonas Dreßler <verdre v0yd nl>
Date:   Tue Mar 9 17:37:22 2021 +0100

    overviewControls: Hide the appDisplay when it's not shown
    
    Hiding actors allows excluding them from layout, so by hidding the
    appDisplay in all the cases where the overviewAdjustment is not actually
    showing it, we can save a lot of time on the first frame of painting
    the overview because we no longer have to layout the whole appGrid.
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1755>

 js/ui/overviewControls.js | 44 +++++++++++++++++++++++++++-----------------
 1 file changed, 27 insertions(+), 17 deletions(-)
---
diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 72542b3813..2a0dd3c66d 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -179,23 +179,26 @@ class ControlsManagerLayout extends Clutter.BoxLayout {
         this._workspacesDisplay.allocate(workspacesBox);
 
         // AppDisplay
-        const workspaceAppGridBox =
-            this._cachedWorkspaceBoxes.get(ControlsState.APP_GRID);
-
-        params = [box, searchHeight, dashHeight, workspaceAppGridBox];
-        let appDisplayBox;
-        if (!transitionParams.transitioning) {
-            appDisplayBox =
-                this._getAppDisplayBoxForState(transitionParams.currentState, ...params);
-        } else {
-            const initialBox =
-                this._getAppDisplayBoxForState(transitionParams.initialState, ...params);
-            const finalBox =
-                this._getAppDisplayBoxForState(transitionParams.finalState, ...params);
+        if (this._appDisplay.visible) {
+            const workspaceAppGridBox =
+                this._cachedWorkspaceBoxes.get(ControlsState.APP_GRID);
+
+            params = [box, searchHeight, dashHeight, workspaceAppGridBox];
+            let appDisplayBox;
+            if (!transitionParams.transitioning) {
+                appDisplayBox =
+                    this._getAppDisplayBoxForState(transitionParams.currentState, ...params);
+            } else {
+                const initialBox =
+                    this._getAppDisplayBoxForState(transitionParams.initialState, ...params);
+                const finalBox =
+                    this._getAppDisplayBoxForState(transitionParams.finalState, ...params);
+
+                appDisplayBox = initialBox.interpolate(finalBox, transitionParams.progress);
+            }
 
-            appDisplayBox = initialBox.interpolate(finalBox, transitionParams.progress);
+            this._appDisplay.allocate(appDisplayBox);
         }
-        this._appDisplay.allocate(appDisplayBox);
 
         // Search
         childBox.set_origin(0, searchHeight + spacing);
@@ -500,6 +503,12 @@ class ControlsManager extends St.Widget {
         this._thumbnailsBox.ease(params);
     }
 
+    _updateAppDisplayVisibility() {
+        this._appDisplay.visible =
+            this._stateAdjustment.value > ControlsState.WINDOW_PICKER &&
+            !this._searchController.searchActive;
+    }
+
     _update() {
         const params = this._stateAdjustment.getStateTransitionParams();
 
@@ -512,13 +521,14 @@ class ControlsManager extends St.Widget {
         fitModeAdjustment.value = fitMode;
 
         this._updateThumbnailsBox();
+        this._updateAppDisplayVisibility();
     }
 
     _onSearchChanged() {
         const { searchActive } = this._searchController;
 
         if (!searchActive) {
-            this._appDisplay.show();
+            this._updateAppDisplayVisibility();
             this._workspacesDisplay.reactive = true;
             this._workspacesDisplay.setPrimaryWorkspaceVisible(true);
         } else {
@@ -531,7 +541,7 @@ class ControlsManager extends St.Widget {
             opacity: searchActive ? 0 : 255,
             duration: SIDE_CONTROLS_ANIMATION_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-            onComplete: () => (this._appDisplay.visible = !searchActive),
+            onComplete: () => this._updateAppDisplayVisibility(),
         });
         this._workspacesDisplay.ease({
             opacity: searchActive ? 0 : 255,