Make filteredQueryResultsSelector async :)

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,30 +16,51 @@ 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%;
+  background-color: white;
   height: 32px;
   width: 32px;
   border: none;
@@ -42,10 +68,11 @@ input[type="color" i] {
   -webkit-appearance: none;
 }
 
-#color-picker::-webkit-color-swatch {
+.color-picker::-webkit-color-swatch {
   border: none;
   border-radius: 50%;
-}
+  margin: 4px;
+} */
 
 /* input {
   margin: 4px;

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 />
+        <Suspense fallback={<div>Loading...</div>}>
           <IconGrid />
+        </Suspense>
       </main>
       <Footer />
     </>

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)))
+    );
   },
 });