From c39063b339dbaf3481cde9bd7e0fb5fee1636b09 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 17 May 2020 13:51:07 -0700
Subject: [PATCH]  use rIC

---
 package.json                            | 4 +++-
 src/svelte/Picker.svelte                | 9 ++++++++-
 src/svelte/utils/requestIdleCallback.js | 3 +++
 3 files changed, 14 insertions(+), 2 deletions(-)
 create mode 100644 src/svelte/utils/requestIdleCallback.js

diff --git a/package.json b/package.json
index c19ca2e..b742555 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,9 @@
     "global": [
       "fetch",
       "indexedDB",
-      "IDBKeyRange"
+      "IDBKeyRange",
+      "requestAnimationFrame",
+      "requestIdleCallback"
     ]
   }
 }
diff --git a/src/svelte/Picker.svelte b/src/svelte/Picker.svelte
index ef097db..d313ebb 100644
--- a/src/svelte/Picker.svelte
+++ b/src/svelte/Picker.svelte
@@ -9,7 +9,7 @@
             placeholder={i18n.search}
             autocapitalize="none"
             spellcheck="true"
-            bind:value={searchText}
+            bind:value={rawSearchText}
     >
     <label class="lep-sr-only" for="lite-emoji-picker-search">{i18n.search}</label>
   </div>
@@ -85,11 +85,13 @@
   import { DEFAULT_LOCALE, DEFAULT_DATA_SOURCE } from '../database/constants'
   import { Database } from '../database/Database'
   import { MIN_SEARCH_TEXT_LENGTH } from './constants'
+  import { requestIdleCallback } from './utils/requestIdleCallback'
 
   let currentEmojis = []
   let locale = DEFAULT_LOCALE
   let dataSource = DEFAULT_DATA_SOURCE
   let currentCategory = categories[0]
+  let rawSearchText = ''
   let searchText = ''
   $: database = new Database({ dataSource, locale })
   $: {
@@ -106,6 +108,11 @@
       }
     })()
   }
+  $: {
+    requestIdleCallback(() => {
+      searchText = rawSearchText // defer to avoid input delays
+    })
+  }
 
   function filterEmojis (emojis) {
     return emojis.filter(emoji => emoji.version <= emojiSupportLevel)
diff --git a/src/svelte/utils/requestIdleCallback.js b/src/svelte/utils/requestIdleCallback.js
new file mode 100644
index 0000000..401c637
--- /dev/null
+++ b/src/svelte/utils/requestIdleCallback.js
@@ -0,0 +1,3 @@
+const rIC = typeof requestIdleCallback === 'function' ? requestIdleCallback : requestAnimationFrame
+
+export { rIC as requestIdleCallback }
\ No newline at end of file