[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>
   );
 }

apps/portal/src/pages/resumes/index.tsx

@@ -10,9 +10,8 @@ import {
   PlusIcon,
 } from '@heroicons/react/20/solid';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { Spinner, Tabs, TextInput } from '@tih/ui';
+import { Tabs, TextInput } from '@tih/ui';
 
-import BrowseListItem from '~/components/resumes/browse/BrowseListItem';
 import {
   BROWSE_TABS_VALUES,
   EXPERIENCE,
@@ -22,8 +21,11 @@ import {
   TOP_HITS,
 } from '~/components/resumes/browse/constants';
 import FilterPill from '~/components/resumes/browse/FilterPill';
+import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
 import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
 
+import { trpc } from '~/utils/trpc';
+
 import type { Resume } from '~/types/resume';
 
 const filters = [
@@ -44,8 +46,6 @@ const filters = [
   },
 ];
 
-import { trpc } from '~/utils/trpc';
-
 export default function ResumeHomePage() {
   const { data: sessionData } = useSession();
   const router = useRouter();
@@ -140,6 +140,7 @@ export default function ResumeHomePage() {
                   <div className="col-span-1 justify-self-center">
                     <Menu as="div" className="relative inline-block text-left">
                       <div>
+                        {/* TODO: Sort logic */}
                         <Menu.Button className="group inline-flex justify-center text-sm font-medium text-gray-700 hover:text-gray-900">
                           Sort
                           <ChevronDownIcon
@@ -269,26 +270,14 @@ export default function ResumeHomePage() {
                   </form>
                 </div>
               </div>
-              {allResumesQuery.isLoading ||
-              starredResumesQuery.isLoading ||
-              myResumesQuery.isLoading ? (
-                <div className="col-span-10 pt-4">
-                  <Spinner display="block" size="lg" />
-                </div>
-              ) : (
-                <div className="col-span-10 pr-8">
-                  <ul role="list">
-                    {resumes.map((resumeObj) => (
-                      <li key={resumeObj.id}>
-                        <BrowseListItem
-                          href={`resumes/${resumeObj.id}`}
-                          resumeInfo={resumeObj}
-                        />
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              )}
+              <ResumeListItems
+                isLoading={
+                  allResumesQuery.isFetching ||
+                  starredResumesQuery.isFetching ||
+                  myResumesQuery.isFetching
+                }
+                resumes={resumes}
+              />
             </div>
           </div>
         </div>