[resumes][feat] add loading screens for resumes/comments (#342)

apps/portal/src/components/resumes/browse/ResumeListItems.tsx

@@ -0,0 +1,35 @@
+import { Spinner } from '@tih/ui';
+
+import ResumseListItem from './ResumeListItem';
+
+import type { Resume } from '~/types/resume';
+
+type Props = Readonly<{
+  isLoading: boolean;
+  resumes: Array<Resume>;
+}>;
+
+export default function ResumeListItems({ isLoading, resumes }: Props) {
+  if (isLoading) {
+    return (
+      <div className="col-span-10 pt-4">
+        <Spinner display="block" size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="col-span-10 pr-8">
+      <ul role="list">
+        {resumes.map((resumeObj: Resume) => (
+          <li key={resumeObj.id}>
+            <ResumseListItem
+              href={`resumes/${resumeObj.id}`}
+              resumeInfo={resumeObj}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

apps/portal/src/components/resumes/browse/constants.ts

@@ -54,7 +54,7 @@ export const EXPERIENCE = [
 
 export const LOCATION = [
   { checked: false, label: 'Singapore', value: 'Singapore' },
-  { checked: false, label: 'United States', value: 'US' },
+  { checked: false, label: 'United States', value: 'United States' },
   { checked: false, label: 'India', value: 'India' },
 ];
 

apps/portal/src/components/resumes/comments/CommentListItems.tsx

@@ -0,0 +1,35 @@
+import { useSession } from 'next-auth/react';
+import { Spinner } from '@tih/ui';
+
+import Comment from './comment/Comment';
+
+import type { ResumeComment } from '~/types/resume-comments';
+
+type Props = Readonly<{
+  comments: Array<ResumeComment>;
+  isLoading: boolean;
+}>;
+
+export default function CommentListItems({ comments, isLoading }: Props) {
+  const { data: session } = useSession();
+
+  if (isLoading) {
+    return (
+      <div className="col-span-10 pt-4">
+        <Spinner display="block" size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-3 overflow-y-scroll">
+      {comments.map((comment) => (
+        <Comment
+          key={comment.id}
+          comment={comment}
+          userId={session?.user?.id}
+        />
+      ))}
+    </div>
+  );
+}

apps/portal/src/components/resumes/comments/CommentsList.tsx

@@ -1,10 +1,9 @@
-import { useSession } from 'next-auth/react';
 import { useState } from 'react';
 import { Tabs } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-import Comment from './comment/Comment';
+import CommentListItems from './CommentListItems';
 import CommentsListButton from './CommentsListButton';
 import { COMMENTS_SECTIONS } from './constants';
 
@@ -18,12 +17,9 @@ export default function CommentsList({
   setShowCommentsForm,
 }: CommentsListProps) {
   const [tab, setTab] = useState(COMMENTS_SECTIONS[0].value);
-  const { data: session } = useSession();
 
   const commentsQuery = trpc.useQuery(['resumes.reviews.list', { resumeId }]);
 
-  // TODO: Add loading prompt
-
   return (
     <div className="space-y-3">
       <CommentsListButton setShowCommentsForm={setShowCommentsForm} />
@@ -33,20 +29,10 @@ export default function CommentsList({
         value={tab}
         onChange={(value) => setTab(value)}
       />
-
-      <div className="m-2 flow-root h-[calc(100vh-20rem)] w-full flex-col space-y-3 overflow-y-scroll">
-        {commentsQuery.data
-          ?.filter((c) => c.section === tab)
-          .map((comment) => {
-            return (
-              <Comment
-                key={comment.id}
-                comment={comment}
-                userId={session?.user?.id}
-              />
-            );
-          })}
-      </div>
+      <CommentListItems
+        comments={commentsQuery.data?.filter((c) => c.section === tab) ?? []}
+        isLoading={commentsQuery.isFetching}
+      />
     </div>
   );
 }