Loading animation whilest fetching

Author: dthyresson

app/lib/footer.tsx

@@ -8,7 +8,7 @@ export function Footer() {
       {
         name: "Twitter",
         href: "#",
-        icon: (props) => (
+        icon: (props: any) => (
           <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
             <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
           </svg>
@@ -17,7 +17,7 @@ export function Footer() {
       {
         name: "GitHub",
         href: "#",
-        icon: (props) => (
+        icon: (props: any) => (
           <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
             <path
               fillRule="evenodd"

app/lib/loading.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export function Loading() {
+  return (
+    <div className="grid place-items-center h-80">
+      <svg
+        className="animate-bounce w-12 h-12 text-green-400"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill="currentColor"
+          fillRule="evenodd"
+          d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
+          clipRule="evenodd"
+        ></path>
+      </svg>{" "}
+    </div>
+  );
+}

app/pages/comments.tsx

@@ -6,6 +6,7 @@ import { useQuery } from "urql";
 import { gql } from "../gql";
 import { CommentItem } from "../lib/comment-item";
 import { Container } from "../lib/container";
+import { Loading } from "../lib/loading";
 import { MainSection } from "../lib/main-section";
 
 const CommentsRouteQuery = gql(/* GraphQL */ `
@@ -43,6 +44,8 @@ const Comments: NextPage = () => {
         <section className="text-gray-600 body-font overflow-hidden">
           <div className="container px-5 py-24 mx-auto">
             <div className="-my-8 divide-y-2 divide-gray-100">
+              {commentsQuery.fetching && <Loading />}
+
               {commentsQuery?.data?.comments?.edges.map((edge) => (
                 <CommentItem comment={edge.node!} key={edge.cursor} />
               ))}

app/pages/index.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "urql";
 import { gql } from "../gql";
 import { Container } from "../lib/container";
 import { FeedItem } from "../lib/feed-item";
+import { Loading } from "../lib/loading";
 import { MainSection } from "../lib/main-section";
 import { noopUUID } from "../lib/noop-uuid";
 
@@ -53,6 +54,7 @@ const Home: NextPage = () => {
         <section className="text-gray-600 body-font overflow-hidden w-full">
           <div className="container px-3 py-24 mx-auto">
             <div className="-my-8">
+              {indexQuery.fetching && <Loading />}
               {indexQuery?.data?.feed?.edges.map((edge) => (
                 <FeedItem post={edge.node!} key={edge.cursor} />
               ))}

app/pages/newest.tsx

@@ -5,6 +5,7 @@ import { useQuery } from "urql";
 import { gql } from "../gql";
 import { Container } from "../lib/container";
 import { FeedItem } from "../lib/feed-item";
+import { Loading } from "../lib/loading";
 import { MainSection } from "../lib/main-section";
 import { noopUUID } from "../lib/noop-uuid";
 
@@ -46,6 +47,7 @@ const Newest: NextPage = () => {
         <section className="text-gray-600 body-font overflow-hidden w-full">
           <div className="container px-5 py-24 mx-auto">
             <div className="-my-8">
+              {newestQuery.fetching && <Loading />}
               {newestQuery?.data?.feed?.edges.map((edge) => (
                 <FeedItem post={edge.node!} key={edge.cursor} />
               ))}