feat: Add a "No projects found" message when search field no results …

…on the Projects page gf-187 (#210)

* feat: add the message gf-187

* feat: add styles to the message gf-187

* fix: fix placeholder styles gf-187

* feat: change placeholder color gf-187

apps/frontend/src/pages/projects/projects.tsx

@@ -50,7 +50,7 @@ const Projects = (): JSX.Element => {
 		[dispatch],
 	);
 
-	const hasProject = projects.length === EMPTY_LENGTH;
+	const hasProject = projects.length !== EMPTY_LENGTH;
 
 	const {
 		isOpened: isCreateModalOpen,
@@ -122,7 +122,7 @@ const Projects = (): JSX.Element => {
 
 	const isLoading =
 		dataStatus === DataStatus.IDLE ||
-		(dataStatus === DataStatus.PENDING && hasProject);
+		(dataStatus === DataStatus.PENDING && !hasProject);
 
 	return (
 		<PageLayout>
@@ -131,20 +131,27 @@ const Projects = (): JSX.Element => {
 				<Button label="Create New" onClick={handleCreateModalOpen} />
 			</header>
 			<ProjectsSearch onChange={handleSearchChange} />
-			<div className={styles["projects-list"]}>
-				{isLoading ? (
-					<Loader />
-				) : (
-					projects.map((project) => (
-						<ProjectCard
-							key={project.id}
-							onDelete={handleDeleteClick}
-							onEdit={handleEditClick}
-							project={project}
-						/>
-					))
-				)}
-			</div>
+			{isLoading ? (
+				<Loader />
+			) : (
+				<div className={styles["projects-list"]}>
+					{hasProject ? (
+						projects.map((project) => (
+							<ProjectCard
+								key={project.id}
+								onDelete={handleDeleteClick}
+								onEdit={handleEditClick}
+								project={project}
+							/>
+						))
+					) : (
+						<p className={styles["empty-placeholder"]}>
+							No projects found matching your search criteria. Please try
+							different keywords.
+						</p>
+					)}
+				</div>
+			)}
 			<Modal
 				isOpened={isCreateModalOpen}
 				onClose={handleCreateModalClose}

apps/frontend/src/pages/projects/styles.module.css

@@ -17,3 +17,11 @@
 	gap: 12px;
 	padding: 20px 0;
 }
+
+.empty-placeholder {
+	align-self: center;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 150%;
+	color: var(--color-text-secondary);
+}