From 49ec33ae71661b56420f8197f23398d1a297fbb3 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Fri, 27 Oct 2017 03:30:27 +0000
Subject: [PATCH] Themes: Switch back from throttling to debouncing in theme
 searches on admin screen.

Start debouncing after initial search performed when `search` query param is present to prevent initial "flash of unsearched themes".

Props afercia, westonruter.
Amends [41797].
See #40254.
Fixes #42348.


git-svn-id: https://develop.svn.wordpress.org/trunk@42029 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/theme.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index 0f35f9fa36..41fd4e6653 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/wp-admin/js/theme.js
@@ -102,6 +102,7 @@ themes.view.Appearance = wp.Backbone.View.extend({
 			collection: self.collection,
 			parent: this
 		});
+		self.searchView = view;
 
 		// Render and append after screen title
 		view.render();
@@ -1347,12 +1348,12 @@ themes.view.Search = wp.Backbone.View.extend({
 			event.target.value = '';
 		}
 
-		// Note that doSearch is throttled.
+		// Since doSearch is debounced, it will only run when user input comes to a rest.
 		this.doSearch( event );
 	},
 
 	// Runs a search on the theme collection.
-	doSearch: _.throttle( function( event ) {
+	doSearch: function( event ) {
 		var options = {};
 
 		this.collection.doSearch( event.target.value.replace( /\+/g, ' ' ) );
@@ -1370,7 +1371,7 @@ themes.view.Search = wp.Backbone.View.extend({
 		} else {
 			themes.router.navigate( themes.router.baseUrl( '' ) );
 		}
-	}, 500 ),
+	},
 
 	pushState: function( event ) {
 		var url = themes.router.baseUrl( '' );
@@ -1445,6 +1446,9 @@ themes.Run = {
 		});
 
 		this.render();
+
+		// Start debouncing user searches after Backbone.history.start().
+		this.view.searchView.doSearch = _.debounce( this.view.searchView.doSearch, 500 );
 	},
 
 	render: function() {
@@ -1520,7 +1524,7 @@ themes.view.InstallerSearch =  themes.view.Search.extend({
 		this.doSearch( event.target.value );
 	},
 
-	doSearch: _.throttle( function( value ) {
+	doSearch: function( value ) {
 		var request = {};
 
 		// Don't do anything if the search terms haven't changed.
@@ -1564,7 +1568,7 @@ themes.view.InstallerSearch =  themes.view.Search.extend({
 
 		// Set route
 		themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + encodeURIComponent( value ) ), { replace: true } );
-	}, 500 )
+	}
 });
 
 themes.view.Installer = themes.view.Appearance.extend({
@@ -1919,6 +1923,8 @@ themes.RunInstaller = {
 		// Render results
 		this.render();
 
+		// Start debouncing user searches after Backbone.history.start().
+		this.view.searchView.doSearch = _.debounce( this.view.searchView.doSearch, 500 );
 	},
 
 	render: function() {