From 8ae4cb2b81bf3001c964750895c839c0fffde869 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Fri, 24 Jul 2020 14:38:53 -0400
Subject: [PATCH] Make filteredQueryResultsSelector async :)

---
 src/components/App/App.css | 59 +++++++++++++++++++++++++++-----------
 src/components/App/App.tsx |  9 ++++--
 src/state/selectors.ts     |  9 +++---
 3 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/src/components/App/App.css b/src/components/App/App.css
index 9a94f2b..a964737 100644
--- a/src/components/App/App.css
+++ b/src/components/App/App.css
@@ -1,9 +1,14 @@
+html {
+  background-color: #FAFAFA;
+}
+
 body {
   margin: 0px;
   font-family: monospace;
 }
 
-button, select {
+button,
+select {
   margin: 4px;
   padding: 8px;
   border: 1px solid black;
@@ -11,41 +16,63 @@ button, select {
   background-color: white;
 }
 
-button:focus, select:focus {
+button > * {
+  vertical-align: middle;
+}
+
+button:focus,
+select:focus {
   outline: none;
   border: 1px solid violet;
   border-radius: 24px;
 }
 
+button:hover {
+  color: white;
+  background-color: black;
+}
 button:active {
-  background-color: lightblue;
+  background-color: darkmagenta;
 }
 
 input[type="color"] {
   border: 1px solid black;
-  border-radius: 24px;
+  border-radius: 50%;
+  background-color: white;
 }
 
 input[type="color" i] {
   -webkit-appearance: square-button;
-  width: 32px;
-  height: 32px;
+  padding: 4px;
+  width: 25px;
+  height: 25px;
 }
 
-#color-picker {
+input[type="color"]:focus {
+  outline: none;
+  border: 1px solid violet;
+}
+
+pre {
+  padding: 4px;
+  background-color: gainsboro;
+}
+
+/* .color-picker {
   padding: 0px;
-  border-radius: 100%;
-    height: 32px;
-    width: 32px;
-    border: none;
-    outline: none;
-    -webkit-appearance: none;
+  background-color: white;
+  height: 32px;
+  width: 32px;
+  border: none;
+  outline: none;
+  -webkit-appearance: none;
 }
 
-#color-picker::-webkit-color-swatch {
+.color-picker::-webkit-color-swatch {
   border: none;
   border-radius: 50%;
-}
+  margin: 4px;
+} */
 
 /* input {
   margin: 4px;
@@ -59,4 +86,4 @@ input:focus {
   outline: none;
   border: 2px solid violet;
   border-radius: 24px;
-} */
\ No newline at end of file
+} */
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index dcbcaff..d818d5a 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { Suspense } from "react";
 
-import { Header, Toolbar, IconGrid, Footer } from "../";
+import { Header, Toolbar, Footer } from "../";
 import "./App.css";
+import IconGrid from "../IconGrid/IconGrid";
 
 const App: React.FC<any> = () => {
   return (
@@ -9,7 +10,9 @@ const App: React.FC<any> = () => {
       <Header />
       <main>
         <Toolbar />
-        <IconGrid />
+        <Suspense fallback={<div>Loading...</div>}>
+          <IconGrid />
+        </Suspense>
       </main>
       <Footer />
     </>
diff --git a/src/state/selectors.ts b/src/state/selectors.ts
index e72d940..55aa58b 100644
--- a/src/state/selectors.ts
+++ b/src/state/selectors.ts
@@ -21,16 +21,15 @@ const isQueryMatch = (icon: IconEntry, query: string): boolean => {
 
 export const filteredQueryResultsSelector = selector<Readonly<IconEntry[]>>({
   key: "filteredQueryResultsSelector",
-  get: ({ get }) => {
+  get: async ({ get }) => {
     const query = get(searchQueryAtom).trim().toLowerCase();
     const style = get(styleQueryAtom);
 
     if (!query && !style) return icons;
 
-    return icons.filter((icon) => {
-      return isQueryMatch(icon, query);
-    });
-    // .sort(() => Math.floor(Math.random() - 0.5));
+    return await new Promise((resolve) =>
+      resolve(icons.filter((icon) => isQueryMatch(icon, query)))
+    );
   },
 });