chore(examples/vite-react): clean up for suspense

gqty-dev · Feb 25, 2024 · 2642c1f · 2642c1f
1 parent 8d9db13
commit 2642c1f
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 76 deletions.
diff --git a/examples/vite-react/src/App.css b/examples/vite-react/src/App.css
diff --git a/examples/vite-react/src/App.tsx b/examples/vite-react/src/App.tsx
@@ -1,30 +1,35 @@
-import { useState } from 'react';
-import './App.css';
-import Avatar from './App/Avatar';
-import Card from './App/Card';
-import SmallText from './App/SmallText';
-import { Text } from './App/Text';
-import { useQuery } from './gqty';
+import { Suspense, useDeferredValue, useState } from 'react';
+import Characters from './App/Characters';
 import logo from './logo.svg';
 
 let renderCount = 0;
 
 function App() {
   const [count, setCount] = useState(0);
-  const { characters } = useQuery();
+  const [search, setSearch] = useState('');
+  const deferredSearch = useDeferredValue(search);
 
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Hello Vite + React!</p>
+    <div className="bg-gray-600">
+      <header className="flex flex-col items-center justify-center py-8 gap-3 text-white">
+        <div className="flex items-center justify-center text-3xl">
+          <img
+            src={logo}
+            alt="logo"
+            width={48}
+            height={48}
+            className="animate-spin pointer-events-none select-none"
+            style={{ animationDuration: '3s' }}
+          />
+          <p>Hello Vite + React!</p>
+        </div>
 
-        <p>Render count {++renderCount}</p>
+        <p className="text-xl">Render count {++renderCount}</p>
 
         <p>
           <button
             type="button"
-            className="
+            className="text-xl
               rounded bg-gray-100 text-gray-900 px-4 py-2
               hover:bg-gray-200 hover:text-gray-800
               active:bg-gray-300 active:text-gray-700
@@ -34,12 +39,13 @@ function App() {
             You've clicked me {count} times.
           </button>
         </p>
+
         <p>
           Edit <code>App.tsx</code> and save to test HMR updates.
         </p>
         <p>
           <a
-            className="App-link"
+            className="text-blue-400 hover:underline"
             href="https://reactjs.org"
             target="_blank"
             rel="noopener noreferrer"
@@ -48,31 +54,32 @@ function App() {
           </a>
           {' | '}
           <a
-            className="App-link"
+            className="text-blue-400 hover:underline"
             href="https://vitejs.dev/guide/features.html"
             target="_blank"
             rel="noopener noreferrer"
           >
             Vite Docs
           </a>
         </p>
+      </header>
 
-        <div className="container text-left">
-          {characters({ filter: { name: 'alien' } })?.results?.map(
-            (character) => (
-              <Card key={character?.id ?? '0'}>
-                <Avatar character={character} />
+      <div className="container mx-auto text-left">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search for a character..."
+          className="w-full p-2 rounded border border-gray-300 text-black"
+        />
 
-                <div className="flex-1 text-black">
-                  <Text>{character?.name}</Text>
-                  <SmallText>{character?.species}</SmallText>
-                  <SmallText>{character?.origin?.name}</SmallText>
-                </div>
-              </Card>
-            )
-          )}
-        </div>
-      </header>
+        <Suspense fallback="Loading ...">
+          <Characters
+            name={deferredSearch}
+            className={search === deferredSearch ? '' : 'animate-pulse'}
+          />
+        </Suspense>
+      </div>
     </div>
   );
 }

diff --git a/examples/vite-react/src/App/Avatar.tsx b/examples/vite-react/src/App/Avatar.tsx
@@ -1,5 +1,5 @@
 import { type FunctionComponent } from 'react';
-import { Character, Maybe } from '../gqty';
+import { type Character, type Maybe } from '../gqty';
 import Skeleton from './Skeleton';
 
 const avatarStyle = `inline-block rounded-full mr-3`;

diff --git a/examples/vite-react/src/App/Characters.tsx b/examples/vite-react/src/App/Characters.tsx
@@ -0,0 +1,31 @@
+import { type FunctionComponent } from 'react';
+import { useQuery } from '../gqty';
+import Avatar from './Avatar';
+import Card from './Card';
+import SmallText from './SmallText';
+import Text from './Text';
+
+const Characters: FunctionComponent<{
+  className?: string;
+  name?: string;
+}> = ({ className, name }) => {
+  const { characters } = useQuery({ suspense: true });
+
+  return (
+    <div className={className}>
+      {characters({ filter: { name } })?.results?.map((character) => (
+        <Card key={character?.id ?? '0'}>
+          <Avatar character={character} />
+
+          <div className="flex-1 text-black">
+            <Text>{character?.name}</Text>
+            <SmallText>{character?.species}</SmallText>
+            <SmallText>{character?.origin?.name}</SmallText>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+};
+
+export default Characters;
diff --git a/packages/cli/src/commands/default/logger.ts b/packages/cli/src/commands/default/logger.ts
@@ -35,7 +35,7 @@ export const logger = {
     return normalMessage(chalk.yellow('!'), ...args);
   },
   info(...args: unknown[]) {
-    return normalMessage(chalk.cyan('i'), ...args);
+    return normalMessage(chalk.cyan('ℹ'), ...args);
   },
   success(...args: unknown[]) {
     return normalMessage(chalk.green('✔'), ...args);
@@ -48,7 +48,7 @@ export const logger = {
     return progressMessage(chalk.yellow('!') + ' ' + message);
   },
   infoProgress(message: string) {
-    return progressMessage(chalk.cyan('i') + ' ' + message);
+    return progressMessage(chalk.cyan('ℹ') + ' ' + message);
   },
   successProgress(message: string) {
     return progressMessage(chalk.green('✔') + ' ' + message);