docs: update supporters and comparison

Author: tannerlinsley

docs/src/pages/docs/comparison.md

@@ -28,7 +28,7 @@ Feature/Capability Key:
 | Dependent Queries                            | ✅                                     | ✅                         | ✅                                  |
 | Paginated Queries                            | ✅                                     | ✅                         | ✅                                  |
 | Infinite Queries                             | ✅                                     | ✅                         | ✅                                  |
-| Lagged Queries<sup>1</sup>                   | ✅                                     | 🛑                         | 🛑                                  |
+| Lagged / "Lazy" Queries<sup>1</sup>          | ✅                                     | 🛑                         | 🛑                                  |
 | Initial Data                                 | ✅                                     | ✅                         | ✅                                  |
 | Scroll Recovery                              | ✅                                     | ✅                         | ✅                                  |
 | Cache Manipulation                           | ✅                                     | ✅                         | ✅                                  |
@@ -48,7 +48,7 @@ Feature/Capability Key:
 
 ### Notes
 
-> **<sup>1</sup> "Lagged" Queries** - React Query provides a way to continue to see an existing query's data while the next query loads (similar to the same UX that suspense will soon provide natively). This is extremely important when writing pagination UIs or infinite loading UIs where you do not want to show a hard loading state whenever a new query is requested. Other libraries do not have this capability and render a hard loading state for the new query (unless it has been prefetched), while the new query loads.
+> **<sup>1</sup> Lagged / "Lazy" Queries** - React Query provides a way to continue to see an existing query's data while the next query loads (similar to the same UX that suspense will soon provide natively). This is extremely important when writing pagination UIs or infinite loading UIs where you do not want to show a hard loading state whenever a new query is requested. Other libraries do not have this capability and render a hard loading state for the new query (unless it has been prefetched), while the new query loads.
 
 > **<sup>2</sup> Partial query matching** - Because React Query uses deterministic query key serialization, this allows you to manipulate variable groups of queries without having to know each individual query-key that you want to match, eg. you can refetch every query that starts with `todos` in its key, regardless of variables, or you can target specific queries with (or without) variables or nested properties, and even use a filter function to only match queries that pass your specific conditions.
 

docs/src/pages/index.js

@@ -9,7 +9,23 @@ import { ClientsMarquee } from 'components/clients/ClientsMarquee'
 import { Seo } from 'components/Seo'
 import Head from 'next/head'
 
-const Home = props => {
+const supporters = [
+  ['Kent C. Dodds (kentcdodds.com)', 'https://kentcdodds.com/'],
+  ['@bgazzera', 'https://github.com/bgazzera"'],
+  ['Gabe Ragland', 'https://github.com/gragland"'],
+]
+
+const fans = [
+  `Steven Miyakawa (@SamSamskies)`,
+  `Alex Trost (@a-trost)`,
+  `Andrey (@andreyvital)`,
+  'Anoop (@Anoupz)',
+  'Daniel Almaguer (@deini)',
+  'Chris Vaszauskas (@chrisvasz)',
+  'Christian Rudh (@crudh)',
+]
+
+const Home = () => {
   return (
     <>
       <Seo
@@ -254,17 +270,11 @@ const Home = props => {
                   Supporters
                 </div>
                 <ul className="list-none text-center">
-                  <li className="font-bold text-blue-800">
-                    <a href="https://kentcdodds.com/">
-                      Kent C. Dodds (kentcdodds.com)
-                    </a>
-                  </li>
-                  <li className="font-bold text-blue-800">
-                    <a href="https://github.com/bgazzera">@bgazzera</a>
-                  </li>
-                  <li className="font-bold text-blue-800">
-                    <a href="https://github.com/gragland">Gabe Ragland</a>
-                  </li>
+                  {supporters.forEach((supporter, i) => (
+                    <li className="font-bold text-blue-800" key={i}>
+                      <a href={supporter[1]}>{supporter[0]}</a>
+                    </li>
+                  ))}
                 </ul>
               </div>
 
@@ -273,9 +283,9 @@ const Home = props => {
                   Fans
                 </div>
                 <ul className="list-none text-center">
-                  <li>Steven Miyakawa (@SamSamskies)</li>
-                  <li>Alex Trost (@a-trost)</li>
-                  <li>Andrey (@andreyvital)</li>
+                  {fans.forEach(fan => (
+                    <li key={fan}>{fan}</li>
+                  ))}
                 </ul>
               </div>
             </div>