Merge pull request #461 from memser-spaceport/fix/listing-optimization

Fix: Listing pages optimization
memser-spaceport · Dec 24, 2024 · 06bdfee · 06bdfee
2 parents ccb79db + 6f0b531
commit 06bdfee
Show file tree

Hide file tree

Showing 16 changed files with 254 additions and 162 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -204,4 +204,174 @@ dialog {
 
 .tox.tox-tinymce-aux {
   z-index: 4000;
+}
+
+.member-grid__profile-container__outer-section__inner-circle__profile {
+  height: 36px;
+  width: 36px;
+  min-width: 36px;
+  min-height: 36px;
+  object-fit: cover;
+  object-position: center;
+  border: 1px solid #e2e8f0;
+  border-radius: 50%;
+}
+
+.team-grid__profile-container__profile {
+  height: 36px;
+  width: 36px;
+  min-width: 36px;
+  min-height: 36px;
+  border-radius: 4px;
+  border: 1px solid #cbd5e1;
+  position: absolute;
+  background-color: #e2e8f0;
+  right: 0;
+  left: 0;
+  margin: auto;
+  top: 13px;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.projectgrid__profile__img {
+  height: 36px;
+  width: 36px;
+  min-width: 36px;
+  min-height: 36px;
+  border-radius: 4px;
+  border: 1px solid #cbd5e1;
+  position: absolute;
+  background-color: #e2e8f0;
+  right: 0;
+  left: 0;
+  margin: auto;
+  top: 13px;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.member-list-view__profile {
+  border: 1px solid #e2e8f0;
+  border-radius: 100%;
+  width: 32px;
+  height: 32px !important;
+  min-width: 32px;
+  min-height: 32px !important;
+  position: absolute;
+}
+
+.team-list__profile-container__profile {
+  height: 32px !important;
+  width: 32px;
+  min-width: 32px;
+  min-height: 32px !important;
+  background-color: #e2e8f0;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.projectlist__profile__img {
+  height: 32px !important;
+  width: 32px;
+  min-width: 32px;
+  min-height: 32px !important;
+  background-color: #e2e8f0;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.projectgrid__maintainer__img {
+  height: 28px !important;
+  width: 28px;
+  min-width: 28px;
+  min-height: 28px !important;
+  border-radius: 4px;
+  border: 1px solid #cbd5e1;
+  background-color: #e2e8f0;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+}
+
+.gtr__guestName__li__img {
+  border-radius: 58px;
+  background-color: #e5e7eb;
+  object-fit: cover;
+  height: 32px !important;
+  width: 32px !important;
+}
+
+.gtr__team__link__img {
+  border-radius: 4px;
+  object-fit: cover;
+  height: 32px !important;
+  width: 32px !important;
+}
+
+@media (min-width: 1024px) {
+
+  .team-grid__profile-container__profile {
+    height: 72px !important;
+    width: 72px;
+    min-width: 72px;
+    min-height: 72px !important;
+    top: 20px;
+  }
+
+  .projectgrid__profile__img {
+    height: 72px !important;
+    width: 72px;
+    min-width: 72px;
+    min-height: 72px !important;
+    top: 20px;
+  }
+
+  .member-list-view__profile {
+    width: 72px;
+    height: 72px !important;
+    min-width: 72px;
+    min-height: 72px !important;
+    position: unset;
+  }
+
+  .team-list__profile-container__profile {
+    height: 72px !important;
+    width: 72px;
+    min-width: 72px;
+    min-height: 72px !important;
+  }
+
+  .projectlist__profile__img {
+    height: 72px !important;
+    width: 72px;
+    min-width: 72px;
+    min-height: 72px !important;
+  }
+
+  .member-grid__profile-container__outer-section__inner-circle__profile {
+    height: 72px !important;
+    width: 72px;
+    min-width: 72px;
+    min-height: 72px !important;
+  }
+
+  .projectgrid__maintainer__img {
+    height: 36px !important;
+    width: 36px;
+    min-width: 36px;
+    min-height: 36px !important;
+  }
+
+  .projectlist__details__maintainer__img {
+    height: 36px !important;
+    width: 36px;
+    min-height: 36px !important;
+    min-width: 36px !important;
+    border-radius: 4px;
+    border: 1px solid #cbd5e1;
+    background-color: #e2e8f0;
+    border-radius: 4px;
+    border: 1px solid #e2e8f0;
+  }
+
 }
diff --git a/app/members/page.tsx b/app/members/page.tsx
@@ -9,7 +9,7 @@ import MembersToolbar from '@/components/page/members/members-toolbar';
 import FilterWrapper from '@/components/page/members/filter-wrapper';
 import EmptyResult from '@/components/core/empty-result';
 import { Metadata } from 'next';
-import { ITEMS_PER_PAGE, SOCIAL_IMAGE_URL } from '@/utils/constants';
+import { INITIAL_ITEMS_PER_PAGE, ITEMS_PER_PAGE, SOCIAL_IMAGE_URL } from '@/utils/constants';
 import MemberInfiniteList from '@/components/page/members/member-infinite-list';
 import { getMemberListForQuery } from '../actions/members.actions';
 
@@ -59,7 +59,7 @@ const getPageData = async (searchParams: IMembersSearchParams) => {
     const [rawFilterValues, availableFilters, memberList, memberRoles] = await Promise.all([
       getFilterValuesForQuery(null, authToken),
       getFilterValuesForQuery(filtersFromQueryParams, authToken),
-      getMemberListForQuery(memberFilterQuery, 1, ITEMS_PER_PAGE, authToken),
+      getMemberListForQuery(memberFilterQuery, 1, INITIAL_ITEMS_PER_PAGE, authToken),
       getMemberRoles(filtersFromQueryParams),
     ]);
 

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -7,7 +7,7 @@ import EmptyResult from '@/components/core/empty-result';
 import ProjectlistWrapper from '@/components/page/projects/projectlist-wrapper';
 import FilterWrapper from '@/components/page/projects/filter-wrapper';
 import { getFocusAreas } from '@/services/common.service';
-import { URL_QUERY_VALUE_SEPARATOR, SOCIAL_IMAGE_URL, ITEMS_PER_PAGE } from '@/utils/constants';
+import { URL_QUERY_VALUE_SEPARATOR, SOCIAL_IMAGE_URL, ITEMS_PER_PAGE, INITIAL_ITEMS_PER_PAGE } from '@/utils/constants';
 import { Metadata } from 'next';
 import { getTeam, searchTeamsByName } from '@/services/teams.service';
 import { getAllProjects } from '../actions/projects.actions';
@@ -49,7 +49,7 @@ const getPageData = async (searchParams: any) => {
     const selectOpitons = getProjectSelectOptions(filterFromQuery);
     const [projectsResponse, focusAreasResponse] = await Promise.all([getAllProjects({...selectOpitons, isDeleted: false,
       select: "uid,name,tagline,logo.url,description,lookingForFunding,maintainingTeam.name,maintainingTeam.logo.url"
-    }, 1, ITEMS_PER_PAGE), getFocusAreas('Project', searchParams)]);
+    }, 1, INITIAL_ITEMS_PER_PAGE), getFocusAreas('Project', searchParams)]);
     if (projectsResponse?.error || focusAreasResponse?.error) {
       isError = true;
       return { isError };

diff --git a/app/teams/page.tsx b/app/teams/page.tsx
@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 
 import {getTeamListFilters } from '@/services/teams.service';
 import { ITeamListOptions, ITeamsSearchParams } from '@/types/teams.types';
-import { SOCIAL_IMAGE_URL } from '@/utils/constants';
+import { INITIAL_ITEMS_PER_PAGE, SOCIAL_IMAGE_URL } from '@/utils/constants';
 import { getCookiesFromHeaders } from '@/utils/next-helpers';
 import { getTeamsListOptions, getTeamsOptionsFromQuery, processFilters } from '@/utils/team.utils';
 import EmptyResult from '../../components/core/empty-result';
@@ -58,7 +58,7 @@ const getPageData = async (searchParams: ITeamsSearchParams) => {
     const listOptions: ITeamListOptions = getTeamsListOptions(optionsFromQuery);
 
     const [teamListResponse, teamListFiltersResponse, teamListFiltersForOptionsResponse, focusAreaResponse] = await Promise.all([
-      getTeamList(listOptions),
+      getTeamList(listOptions, 1, INITIAL_ITEMS_PER_PAGE),
       getTeamListFilters({}),
       getTeamListFilters(listOptions),
       getFocusAreas("Team",searchParams),

diff --git a/components/page/irl/attendee-list/guest-table-row.tsx b/components/page/irl/attendee-list/guest-table-row.tsx
@@ -15,6 +15,7 @@ import GuestDescription from './guest-description';
 import { IGuest, IIrlEvent } from '@/types/irl.types';
 import { IUserInfo } from '@/types/shared.types';
 import { SyntheticEvent } from 'react';
+import Image from 'next/image';
 
 interface IGuestTableRow {
   guest: IGuest;
@@ -178,7 +179,7 @@ const GuestTableRow = (props: IGuestTableRow) => {
           <Link passHref legacyBehavior href={`/members/${guestUid}`}>
             <a target="_blank" className="gtr__guestName__li" onClick={() => onMemberClick(guestUid, guestName)}>
               <div className="gtr__guestName__li__imgWrpr">
-                <img title={guestName} width={32} height={32} alt="member image" src={guestLogo} loading="lazy" className="gtr__guestName__li__img" />
+                <Image alt="profile" loading='eager' height={32} width={32} layout='intrinsic' priority={true} className="gtr__guestName__li__img" src={guestLogo}   />
               </div>
               <div className="gtr__guestName__li__txtWrpr">
                 <div title={guestName} className="gtr__guestName__li__txt ">
@@ -283,7 +284,7 @@ const GuestTableRow = (props: IGuestTableRow) => {
           {teamUid ? <Link passHref legacyBehavior href={`/teams/${teamUid}`}>
             <a target="_blank" className="gtr__team__link" onClick={() => onTeamClick(teamUid, teamName)}>
               <div className="gtr__team__link__imgWrpr">
-                <img title={teamName} className="gtr__team__link__img" width={32} height={32} alt="team logo" src={teamLogo} loading="lazy" />
+                <Image alt="profile" loading='eager' height={32} width={32} layout='intrinsic' priority={true} className="gtr__team__link__img" src={teamLogo}   />
               </div>
               <div>
                 <div title={teamName} className="break-word">
@@ -475,11 +476,6 @@ const GuestTableRow = (props: IGuestTableRow) => {
           border-radius: 58px;
         }
 
-        .gtr__guestName__li__img {
-          border-radius: 58px;
-          background-color: #e5e7eb;
-          object-fit: cover;
-        }
 
         .gtr__guestName__li__txtWrpr {
           display: flex;
@@ -615,11 +611,6 @@ const GuestTableRow = (props: IGuestTableRow) => {
           border-radius: 4px;
         }
 
-        .gtr__team__link__img {
-          border-radius: 4px;
-          object-fit: cover;
-        }
-
         .gtr__attending {
           width: 154px;
           display: flex;

diff --git a/components/page/members/member-grid-view.tsx b/components/page/members/member-grid-view.tsx
@@ -5,6 +5,7 @@ import { IMember } from '@/types/members.types';
 import { parseMemberLocation } from '@/utils/member.utils';
 import MemberSkillList from './member-skill-list';
 import dynamic from 'next/dynamic';
+import Image from 'next/image';
 
 interface IMemberGridView {
   member: IMember;
@@ -35,7 +36,7 @@ const MemberGridView = (props: IMemberGridView) => {
         <div className="member-grid__profile-container">
           <div className="member-grid__profile-container__outer-section">
             <div className={`${isBorder ? 'gradiant-border-rounded' : ''} member-grid__profile-container__outer-section__inner-circle`}>
-              <img loading='eager' className="member-grid__profile-container__outer-section__inner-circle__profile" src={profileUrl} />
+            <Image alt="profile" loading='eager' height={72} width={72} layout='intrinsic' priority={true} className="member-grid__profile-container__outer-section__inner-circle__profile" src={profileUrl}   />
               {isTeamLead && (
                 <Tooltip
                   asChild
@@ -188,14 +189,6 @@ const MemberGridView = (props: IMemberGridView) => {
             position: relative;
           }
 
-          .member-grid__profile-container__outer-section__inner-circle__profile {
-            object-fit: cover;
-            object-position: center;
-            border: 1px solid #e2e8f0;
-            border-radius: 50%;
-            height: 36px;
-            width: 36px;
-          }
 
           .member-grid__details__member-details__team-name-container__tems-count {
             font-size: 10px;
@@ -349,11 +342,6 @@ const MemberGridView = (props: IMemberGridView) => {
               width: 104px;
             }
 
-            .member-grid__profile-container__outer-section__inner-circle__profile {
-              height: 72px;
-              width: 72px;
-            }
-
             .member-grid__profile-container__outer-section {
             }
 

diff --git a/components/page/members/member-infinite-list.tsx b/components/page/members/member-infinite-list.tsx
@@ -13,6 +13,7 @@ import { getMembersListOptions, getMembersOptionsFromQuery } from '@/utils/membe
 import cookies from 'js-cookie';
 import TableLoader from '@/components/core/table-loader';
 import { getMemberListForQuery } from '@/app/actions/members.actions';
+import useListPagination from '@/hooks/use-list-pagination';
 
 const MemberInfiniteList = (props: any) => {
   const members = props?.members ?? [];
@@ -25,7 +26,7 @@ const MemberInfiniteList = (props: any) => {
   const [userList, setUserList] = useState<any>({ users: members, totalItems: totalItems });
   const [isLoading, setIsLoading] = useState(false);
   const observerTarget = useRef<HTMLDivElement>(null);
-  const { currentPage, setPagination } = usePagination({
+  const { currentPage, setPagination } = useListPagination({
     observerTargetRef: observerTarget,
     totalItems: totalItems,
     totalCurrentItems: userList?.users?.length,
@@ -42,23 +43,23 @@ const MemberInfiniteList = (props: any) => {
   const getAllMembers = async () => {
     const toast = (await import('react-toastify')).toast;
     try {
-      setIsLoading(true);
+      // setIsLoading(true);
       const authToken = cookies.get('authToken');
       const optionsFromQuery = getMembersOptionsFromQuery(searchParams);
       const listOptions: IMemberListOptions = getMembersListOptions(optionsFromQuery);
       const teamsRes = await getMemberListForQuery(listOptions, currentPage, ITEMS_PER_PAGE, authToken);
       if (teamsRes.isError) {
-        setIsLoading(false);
+        // setIsLoading(false);
         toast.error(TOAST_MESSAGES.SOMETHING_WENT_WRONG);
         return;
       }
       setUserList((prev: any) => ({ users: [...prev.users, ...teamsRes?.items], totalItems: teamsRes?.total }));
     } catch (error) {
       console.error('Error in fetching teams', error);
       toast.error(TOAST_MESSAGES.SOMETHING_WENT_WRONG);
-      setIsLoading(false);
+      // setIsLoading(false);
     } finally {
-      setIsLoading(false);
+      // setIsLoading(false);
     }
   };
 
@@ -74,7 +75,7 @@ const MemberInfiniteList = (props: any) => {
 
     // Sync team list
     useEffect(() => {
-    setPagination({ page: 1, limit: ITEMS_PER_PAGE});
+    setPagination({ page: 2, limit: ITEMS_PER_PAGE});
     setUserList({ users: members, totalItems: totalItems });
   }, [members]);