chore: improve slightly fallback suspense UI in suspense example

reduxjs · Mar 26, 2022 · f2d0ec6 · f2d0ec6
1 parent a6b7f36
commit f2d0ec6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/examples/query/react/suspense/src/SuspendedPokemon.tsx b/examples/query/react/suspense/src/SuspendedPokemon.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Suspense, useState } from 'react'
 import { Pokemon } from './Pokemon'
 import { PokemonName } from './pokemon.data'
@@ -11,13 +12,13 @@ export interface SuspendedPokemonProps {
 
 function BuggyComponent({ errorCount, name }:Pick<SuspendedPokemonProps, 'name'> & { errorCount: number }) {
   if(!errorCount) {
-    throw new Error('error while rendering:' + name)
+    throw new Error(`error while rendering: ${name}, errorCount ${errorCount}`);
   }
 
   return <></>
 }
 
-export function SuspendedPokemon({
+export const SuspendedPokemon = memo(function SuspendedPokemon({
   name,
   suspendOnRefetch,
   throwOnIntialRender,
@@ -45,9 +46,9 @@ export function SuspendedPokemon({
         {throwOnIntialRender && <BuggyComponent name={name} errorCount={errorCount} />}
         <Suspense
           fallback={
-            <div>
-              suspense fallback <br />
-              loading pokemon {name}
+            <div className={'suspense-fallback-wrapper'}>
+              Suspense fallback UI.<br />
+              Loading pokemon {name}
             </div>
           }
         >
@@ -56,4 +57,4 @@ export function SuspendedPokemon({
       </ErrorBoundary>
     </div>
   )
-}
+});
diff --git a/examples/query/react/suspense/src/styles.css b/examples/query/react/suspense/src/styles.css
@@ -8,3 +8,13 @@
   grid-template-columns: repeat(auto-fill, 180px);
   grid-gap: 20px;
 }
+
+.suspense-fallback-wrapper {
+  display: flex;
+  place-items: center;
+  background: #e0e0e0;
+  color: #202020;
+  border-radius: 8px;
+  font-size: 1.1rem;
+  height: 250px;
+}