Author: Daniel van Vugt <daniel.van.vugt@canonical.com>
Source: https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1884
Editor: Sung Mingi <FiestaLake@protonmail.com>
Commit: cac94861037a793a16e6ba2b174ff74837625406
Last Updated: 04/02/22 (gnome-shell 42.0-1)

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 116e9931d..d89ad17e2 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -202,6 +202,16 @@ var BaseAppView = GObject.registerClass({
         this._scrollView.connect('leave-event', this._onLeave.bind(this));
         this._scrollView.connect('button-press-event', this._onButtonPress.bind(this));
 
+        // Disable the the fade effect shader. IconGrid does its own fading
+        // that's much faster.
+        this._scrollView.update_fade_effect(
+            new Clutter.Margin({
+                left: 0.0,
+                right: 0.0,
+                top: 0.0,
+                bottom: 0.0,
+            }));
+
         this._scrollView.add_actor(this._grid);
 
         const scroll = this._scrollView.hscroll;
@@ -380,10 +390,12 @@ var BaseAppView = GObject.registerClass({
                 -(this._availWidth - this._grid.layout_manager.pageWidth) / 2);
         }
 
-        this._scrollView.update_fade_effect(fadeMargin);
-        const effect = this._scrollView.get_effect('fade');
-        if (effect)
-            effect.extend_fade_area = true;
+        this._updateFadeMargin(fadeMargin);
+    }
+
+    _updateFadeMargin(margin) {
+        const pagePos = this._adjustment.value / this._adjustment.page_size;
+        this._grid.updateFade(pagePos, margin);
     }
 
     _updateFade() {
@@ -411,7 +423,7 @@ var BaseAppView = GObject.registerClass({
                 return;
         }
 
-        this._scrollView.update_fade_effect(
+        this._updateFadeMargin(
             new Clutter.Margin({
                 left: hOffset,
                 right: hOffset,
@@ -2100,6 +2112,10 @@ class AppViewItem extends St.Button {
         this.fake_release();
     }
 
+    get dragging() {
+        return this._draggable && this._dragging;
+    }
+
     get id() {
         return this._id;
     }
diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index 362cfda91..13f005d61 100644
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -1407,4 +1407,33 @@ var IconGrid = GObject.registerClass({
         const layoutManager = this.layout_manager;
         return layoutManager.rows_per_page * layoutManager.columns_per_page;
     }
+
+    updateFade(pagePosition, fadeMargin) {
+        const pageWidth = this.layout_manager.pageWidth;
+        const fadeOutLeftX = pagePosition * pageWidth + fadeMargin.left;
+        const fadeOutRightX = (pagePosition + 1) * pageWidth - fadeMargin.right;
+
+        let children = [];
+        for (let p = 0; p < this.nPages; p++) {
+            children = children.concat(
+                this.getItemsAtPage(p).filter(c => c.visible && !c.dragging)
+            );
+        }
+
+        children.forEach(child => {
+            const childWidth = child.width;
+            const childLeft = child.x;
+            const childRight = childLeft + childWidth;
+
+            let progress = 0.0;
+
+            if (childLeft < fadeOutLeftX && fadeMargin.left > 0)
+                progress = (fadeOutLeftX - childLeft) / childWidth;
+            else if (childRight > fadeOutRightX && fadeMargin.right > 0)
+                progress = (childRight - fadeOutRightX) / childWidth;
+
+            progress = Math.clamp(progress, 0.0, 1.0);
+            child.set_opacity((1.0 - progress) * 255.0);
+        });
+    }
 });