From 0270c7e2331a7df6adb3469213129073bdc7561c Mon Sep 17 00:00:00 2001
From: develad <develadb@gmail.com>
Date: Mon, 1 Apr 2024 23:18:51 +0300
Subject: [PATCH] #246 - Initial commit - Adding skeleton loading spinner in
 members page as described in Figma

---
 actions/fetchFilteredMemebers.ts              |  6 ++--
 app/[locale]/members/page.tsx                 | 13 +++++++--
 components/Members/Skeleton/SkeletonCard.tsx  | 28 +++++++++++++++++++
 components/Members/Skeleton/SkeletonCards.tsx | 17 +++++++++++
 components/ui/skeleton.tsx                    | 18 ++++++++++++
 next.config.js                                |  3 ++
 public/locales/en.json                        |  3 +-
 public/locales/he.json                        |  3 +-
 8 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 components/Members/Skeleton/SkeletonCard.tsx
 create mode 100644 components/Members/Skeleton/SkeletonCards.tsx
 create mode 100644 components/ui/skeleton.tsx

diff --git a/actions/fetchFilteredMemebers.ts b/actions/fetchFilteredMemebers.ts
index 79bf4608..e83caf93 100644
--- a/actions/fetchFilteredMemebers.ts
+++ b/actions/fetchFilteredMemebers.ts
@@ -46,9 +46,9 @@ export const fetchFilteredMembers = async (term: string) => {
         longDescription: dummyMember.longDescription,
         joinDate: dummyMember.joinDate,
         isAdmin: dummyMember.isAdmin,
-        linkedInUrl: linkedIn || '',
-        githubUrl: github || '',
-        twitterUrl: '',
+        linkedInUrl: linkedIn || '#/',
+        githubUrl: github || '#/',
+        twitterUrl: '#/',
         _id: _id || '',
         meta: meta || {},
         timestamp: timestamp || '',
diff --git a/app/[locale]/members/page.tsx b/app/[locale]/members/page.tsx
index 8b418ca6..56ad7c90 100644
--- a/app/[locale]/members/page.tsx
+++ b/app/[locale]/members/page.tsx
@@ -9,6 +9,7 @@ import { useTranslations } from 'next-intl';
 import useTextDirection from '@/hooks/useTextDirection';
 import Magnifier from '@/components/SvgCmps/Magnifier';
 import classNames from 'classnames';
+import SkeletonCards from '@/components/Members/Skeleton/SkeletonCards';
 
 const WelcomeMessage = () => {
   const t = useTranslations('Members');
@@ -48,6 +49,12 @@ const MembersPage: React.FC<{}> = ({}) => {
     return () => clearTimeout(timeoutId);
   }, [searchTerm]);
 
+  const notFoundJSX = (
+    <p className="mt-8 text-2xl md:text-4xl font-bold text-center text-red-400">
+      {t('noMemberFound')}
+    </p>
+  );
+
   return (
     <div className="py-6" dir={direction}>
       <h1 className="text-center leading-[1.2]">{t('title')}</h1>
@@ -66,7 +73,7 @@ const MembersPage: React.FC<{}> = ({}) => {
         <div className="w-full relative h-[45px]">
           <input
             type="text"
-            name={searchTerm}
+            name="searchTerm"
             className="px-4 top-0 right-0 w-full h-full bg-purple-100 dark:bg-gray-800 rounded-r-3xl rounded-l-3xl"
             placeholder={t('searchPlaceholder')}
             onChange={e => setSearchTerm(e.target.value)}
@@ -79,7 +86,9 @@ const MembersPage: React.FC<{}> = ({}) => {
           />
         </div>
       </div>
-      <MembersList members={members} />
+      {members.length === 0 && searchTerm === '' && <SkeletonCards cards={6} />}
+      {members.length === 0 && searchTerm !== '' && notFoundJSX}
+      {members.length !== 0 && <MembersList members={members} />}
     </div>
   );
 };
diff --git a/components/Members/Skeleton/SkeletonCard.tsx b/components/Members/Skeleton/SkeletonCard.tsx
new file mode 100644
index 00000000..7c9d87e5
--- /dev/null
+++ b/components/Members/Skeleton/SkeletonCard.tsx
@@ -0,0 +1,28 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+const SkeletonCard = () => {
+  return (
+    <Skeleton className="flex bg-purple-100 dark:bg-gray-600 rounded-2xl shadow-md w-full xl:w-[400px] xl:h-[173px]">
+      <div className="flex flex-col rounded-md p-[10px] pr-6 w-full">
+        <div className="flex gap-4">
+          <Skeleton className="w-[50px] h-[50px] rounded-full bg-purple-200 dark:bg-slate-100/50" />
+          <div className="titles-container">
+            <div className="flex items-center">
+              <Skeleton className="ml-4 h-4 w-20 bg-purple-200 dark:bg-slate-100/50" />
+            </div>
+            <Skeleton className="mt-2 w-[150px] h-4 bg-purple-200 dark:bg-slate-100/50" />
+          </div>
+        </div>
+        <Skeleton className="w-10/12 md:w-[291px] h-[51px] mt-2 mb-1 bg-purple-200 dark:bg-slate-100/50" />
+        <Skeleton className="w-[100px] h-[15px] mt-2 bg-purple-200 dark:bg-slate-100/50" />
+      </div>
+      <div className="flex flex-col items-center w-[67px] bg-purple-200 justify-evenly dark:bg-gray-800 rounded-tl-2xl rounded-bl-2xl shadow-2xl">
+        <Skeleton className="w-[30px] h-[30px] rounded-full bg-purple-100 dark:bg-slate-100/50" />
+        <Skeleton className="w-[30px] h-[30px] rounded-full bg-purple-100 dark:bg-slate-100/50" />
+        <Skeleton className="w-[30px] h-[30px] rounded-full bg-purple-100 dark:bg-slate-100/50" />
+      </div>
+    </Skeleton>
+  );
+};
+
+export default SkeletonCard;
diff --git a/components/Members/Skeleton/SkeletonCards.tsx b/components/Members/Skeleton/SkeletonCards.tsx
new file mode 100644
index 00000000..f810d651
--- /dev/null
+++ b/components/Members/Skeleton/SkeletonCards.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import SkeletonCard from './SkeletonCard';
+
+const SkeletonCards = ({ cards = 6 }: { cards?: number }) => {
+  const cardsToRender = Array(cards)
+    .fill(null)
+    .map((_, i) => i);
+  return (
+    <div className="flex mx-auto w-[90%] flex-wrap gap-4 mt-6 justify-between">
+      {cardsToRender.map(card => (
+        <SkeletonCard key={card} />
+      ))}
+    </div>
+  );
+};
+
+export default SkeletonCards;
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 00000000..16e55caf
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,18 @@
+import { cn } from '@/lib/utils/tailwind/cn';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'animate-pulse rounded-md bg-purple-100 dark:bg-gray-600',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/next.config.js b/next.config.js
index 345ff148..4f614490 100644
--- a/next.config.js
+++ b/next.config.js
@@ -4,6 +4,9 @@ const createNextIntlPlugin = require('next-intl/plugin');
 const withNextIntl = createNextIntlPlugin('./app/i18n.ts');
 
 const nextConfig = {
+  experimental: {
+    serverActions: true,
+  },
   eslint: {
     dirs: ['app', 'components'],
   },
diff --git a/public/locales/en.json b/public/locales/en.json
index 875face7..9bae24b6 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -129,7 +129,8 @@
     "startOfActivity": "Start of activity",
     "searchPlaceholder": "Search by name, role",
     "secondOption": "Second option",
-    "thirdOption": "Third option"
+    "thirdOption": "Third option",
+    "noMemberFound": "No Member found"
   },
   "Components": {
     "home": {
diff --git a/public/locales/he.json b/public/locales/he.json
index 0e53aefe..a6bd4ba8 100644
--- a/public/locales/he.json
+++ b/public/locales/he.json
@@ -142,7 +142,8 @@
     "startOfActivity": "תחילת פעילות",
     "searchPlaceholder": "חפש לפי שם תפקיד...",
     "secondOption": "אופציה שניה",
-    "thirdOption": "אופציה שלישית"
+    "thirdOption": "אופציה שלישית",
+    "noMemberFound": "המשתמש לא נמצא"
   },
   "Components": {
     "home": {