feat:: improve loading skeletons

simon-hng · Jul 7, 2023 · a2d5c40 · a2d5c40 · vercel · Jul 7, 2023
1 parent 9d91e0e
commit a2d5c40
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 22 deletions.
diff --git a/src/components/card/cardList.tsx b/src/components/card/cardList.tsx
@@ -9,9 +9,9 @@ export const CardList = ({ cards }: Props) => {
   if (!cards) {
     return (
       <div className="columns-sm gap-8">
-        <CardComponent variant="skeleton" className="mb-4 h-16" />
-        <CardComponent variant="skeleton" className="mb-4 h-16" />
-        <CardComponent variant="skeleton" className="mb-4 h-16" />
+        {[...Array(8).keys()].map((i) => (
+          <CardComponent key={i} variant="skeleton" className="mb-4 h-16" />
+        ))}
       </div>
     );
   }

diff --git a/src/components/module/moduleList.tsx b/src/components/module/moduleList.tsx
@@ -1,5 +1,6 @@
 import { api } from "~/utils/api";
 import { ModuleCard } from "./moduleCard";
+import { Card } from "../ui/card";
 
 export const ModuleList = () => {
   const modulesQuery = api.module.getAllForUser.useQuery();
@@ -8,9 +9,9 @@ export const ModuleList = () => {
   if (modulesQuery.isLoading) {
     return (
       <div className="grid gap-4 lg:grid-cols-2">
-        <div className="skeleton h-36 w-full rounded-xl" />
-        <div className="skeleton h-36 w-full rounded-xl" />
-        <div className="skeleton h-36 w-full rounded-xl" />
+        {[...Array(4).keys()].map((i) => (
+          <Card key={i} variant="skeleton" className="h-36" />
+        ))}
       </div>
     );
   }

diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
@@ -11,7 +11,7 @@ export const styles = cva(
       },
       variant: {
         primary: "bg-slate-900 text-white",
-        skeleton: "h-40 skeleton",
+        skeleton: "skeleton",
         glass: "backdrop-blur-lg bg-slate-900/50",
       },
       padding: {

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -3,9 +3,11 @@ import { useSession } from "next-auth/react";
 import Head from "next/head";
 import { ModuleList } from "~/components/module";
 import { Section } from "~/components/ui/section";
+import { api } from "~/utils/api";
 
 const Home: NextPage = () => {
-  const { data: session } = useSession({ required: true });
+  const { data: session, status } = useSession({ required: true });
+  const quoteQuery = api.quotes.getDailyQuote.useQuery();
   return (
     <>
       <Head>
@@ -17,13 +19,15 @@ const Home: NextPage = () => {
       <div className="pt-20">
         <Section>
           <div className="mb-12">
-            <h1 className="mb-4 text-4xl font-semibold">
-              Hello {session?.user.name}, welcome back!
-            </h1>
+            {status === "loading" && <h1 className="skeleton mb-4 text-4xl" />}
+            {status === "authenticated" && (
+              <h1 className="mb-4 text-4xl font-semibold">
+                Hello {session?.user.name}, welcome back!
+              </h1>
+            )}
 
-            <p className="mb-2">
-              {`"Look up in the sky It's a bird, it's a plane - Roseanne Park"`}
-            </p>
+            {quoteQuery.isLoading && <p className="skeleton mb-2" />}
+            {quoteQuery.data && <p className="mb-2">{quoteQuery.data}</p>}
           </div>
 
           <div>

diff --git a/src/pages/modules/[id]/overview.tsx b/src/pages/modules/[id]/overview.tsx
@@ -17,21 +17,26 @@ interface ModuleSummaryProps {
   module?: ModuleInformation;
 }
 const ModuleSummary = ({ module }: ModuleSummaryProps) => {
+  const countCardsDue = (cards: Card[]) => {
+    const now = new Date();
+    return cards.filter((card) => card.dueDate < now).length;
+  };
+
   if (!module) {
     return (
       <div className="mb-12 space-y-4">
-        <div className="skeleton mb-2 text-4xl" />
-        <div className="skeleton mb-4" />
-        <div className="skeleton h-16" />
+        <div className="skeleton mb-2 w-96 max-w-full text-4xl" />
+        <div className="skeleton mb-4 w-16" />
+        <div className="skeleton h-12 w-80" />
+        <div className="scrollbar mb-12 flex flex-row space-x-2 overflow-x-auto">
+          {[...Array(8).keys()].map((i) => (
+            <Button variant="skeleton" key={i} />
+          ))}
+        </div>
       </div>
     );
   }
 
-  const countCardsDue = (cards: Card[]) => {
-    const now = new Date();
-    return cards.filter((card) => card.dueDate < now).length;
-  };
-
   return (
     <div className="mb-12 space-y-4">
       <div>

diff --git a/src/server/api/root.ts b/src/server/api/root.ts
@@ -3,6 +3,7 @@ import { cardRouter } from "./routers/card";
 import { moduleRouter } from "./routers/module";
 import { userRouter } from "./routers/user";
 import { chatRouter } from "./routers/chat";
+import { quoteRouter } from "./routers/quote";
 
 /**
  * This is the primary router for your server.
@@ -14,6 +15,7 @@ export const appRouter = createTRPCRouter({
   module: moduleRouter,
   user: userRouter,
   chat: chatRouter,
+  quotes: quoteRouter,
 });
 
 // export type definition of API

diff --git a/src/server/api/routers/quote.ts b/src/server/api/routers/quote.ts
@@ -0,0 +1,62 @@
+import { createTRPCRouter, protectedProcedure } from "../trpc";
+
+const quotes = [
+  `I never dream to be anything not possible. - Blackpink`,
+  `I'd ask myself, do you want to give up because it's not easy? - Blackpink`,
+  `Life is not easy, there are so many crossroads... that's our life. - Blackpink`,
+  `Don't rely on what others tell you to do, have a firm grasp and do something you like according to your own initiative. - Blackpink`,
+  `Life is all about timing. - Blackpink`,
+  `And I told you to smile. Why didn't you smile? - Lalisa Manoban`,
+  `I told you to smile, but you just ignored my word and you just... - Lalisa Manoban`,
+  `Now burn baby burn! - Lalisa Manoban`,
+  `I feel bittersweet - Lalisa Manoban`,
+  `Korea is OUR country, Thailand is MY country. - Lalisa Manoban`,
+  `It's (Jisoo playing mobile and PC games) silly. - Lalisa Manoban`,
+  `What's wrong with you? You dance wrong. - Lalisa Manoban`,
+  `Even when the four seasons change, I don't. - Lalisa Manoban`,
+  `Been a bad girl, I know I am. And I'm so hot, I need a fan. I don't want a boy, I need a man. - Lalisa Manoban`,
+  `You should be afraid of people who work harder than you. - Lalisa Manoban`,
+  `Spreading the word to the staff members about how the great song and video. - Lalisa Manoban`,
+  `You don't have to do the hands like this.. It looks too dull. You know what I am sayin'? - Lalisa Manoban`,
+  `Purple hearts for Lisa. - Lalisa Manoban`,
+  `I be the Bonnie and you be my Cyde, we ride or die, x's and o's. - Lalisa Manoban`,
+  `In the world full of lies my only truth is you. - Lalisa Manoban`,
+  `When the night gets dark let me be your fire. - Lalisa Manoban`,
+  `Enjoy living life to the fullest. - Lalisa Manoban`,
+  `So don't play with me boy. - Lalisa Manoban`,
+  `Look at you now look at me - Lalisa Manoban`,
+  `BLACKPINK isn't possible if we're not four - Lalisa Manoban`,
+  `You say I'm good because you're a Blink. Everyone, don’t think like that. The way you look at me and the way the world looks at me can be different. - Jenny Ruby Jane`,
+  `All eyes on me when I step in the room. - Jenny Ruby Jane`,
+  `Cut out your heart and show me confidently, sometimes chic, chic, so hot, so hot make me not know what to do, softly call out to me like a whistle in my ear. - Jenny Ruby Jane`,
+  `Hands up, wit little bottle full of henny. - Jenny Ruby Jane`,
+  `I personally like milk ice cream. - Jenny Ruby Jane`,
+  `Unicorns are real. - Jenny Ruby Jane`,
+  `Watch your mouth when you speak my name, Jennie. - Jenny Ruby Jane`,
+  `No doctor could help when I'm lovesick. - Jenny Ruby Jane`,
+  `Guys, that's like the most basic question, you guys should know that already about me cuz it's black and I don't even have to say it. - Jenny Ruby Jane`,
+  `I am way too hungry to remember the name of the song. - Jenny Ruby Jane`,
+  `Don't ask why it has to be you, just stay with me. - Jenny Ruby Jane`,
+  `Blackpink is number one. We will continue to work hard to revive much love and support from fans. - Jenny Ruby Jane`,
+  `Go away, Lisa. - Jenny Ruby Jane`,
+  `They know you're Jisoo. - Jenny Ruby Jane`,
+  `Do you know any cities in New Zealand? - Jenny Ruby Jane`,
+  `Literally Netflix all day. - Jenny Ruby Jane`,
+  `I only say my opinion once and I stop talking about that issue because people learn by making their own mistakes. If you keep saying negative things, you’ll end up hurting yourself and the person. - Kim Ji-soo`,
+  `Even if the words that came to you aren’t beautiful, just ignore them. If you give tit-for-tat, you might stay up all night doing that. Initially, you’d have ended it reasonably with nice words. Bad words won’t end, and nitpicking won’t end. Just ignore them. - Kim Ji-soo`,
+  `The people who dislike me will dislike me, the people who like me will like me, and the people who support me will support me. Regardless of the amount and depth, there are people who support me which makes it fine. If I’m being supported by one person, it’s good. - Kim Ji-soo`,
+  `Love yourself first. However, if you do something for others, it can turn out that it is also for you. - Kim Ji-soo`,
+  `It would be nice if people saw BLACKPINK and somehow gained confidence in themselves. Nothing ever just suited us perfectly from the beginning. So for our fans, find your own charm and gain your confidence through that. - Kim Ji-soo`,
+  `It’s in my personality to not feel down when someone gets angry at me, or when I get criticized. It will be okay as long as I try harder, right? - Kim Ji-soo`,
+];
+
+export const quoteRouter = createTRPCRouter({
+  getDailyQuote: protectedProcedure.query(() => {
+    const index =
+      (new Date().getDate() +
+        new Date().getMonth() +
+        new Date().getFullYear()) %
+      (quotes.length + 1);
+    return quotes[index];
+  }),
+});