From 78c4d836f77eaf135fc8303e9ad0b1d79e70c227 Mon Sep 17 00:00:00 2001
From: ACR1209 <andrescoronel1209@gmail.comraisl>
Date: Sat, 25 Jan 2025 17:47:18 -0500
Subject: [PATCH 1/2] <tweak> Enhance SnippetList component to handle loading
 state and display message when no snippets are found

---
 src/components/SnippetList.tsx | 30 ++++++++++++++++++++----------
 src/styles/main.css            | 13 ++++++++++++-
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx
index 0b9a2025..0b88852c 100644
--- a/src/components/SnippetList.tsx
+++ b/src/components/SnippetList.tsx
@@ -5,22 +5,16 @@ import { useAppContext } from "@contexts/AppContext";
 import { useSnippets } from "@hooks/useSnippets";
 import { SnippetType } from "@types";
 
-import { LeftAngleArrowIcon } from "./Icons";
 import SnippetModal from "./SnippetModal";
 
 const SnippetList = () => {
   const { language, snippet, setSnippet } = useAppContext();
-  const { fetchedSnippets } = useSnippets();
+  const { fetchedSnippets, loading } = useSnippets();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const shouldReduceMotion = useReducedMotion();
 
-  if (!fetchedSnippets)
-    return (
-      <div>
-        <LeftAngleArrowIcon />
-      </div>
-    );
+  if (loading) return null;
 
   const handleOpenModal = (activeSnippet: SnippetType) => {
     setIsModalOpen(true);
@@ -34,9 +28,25 @@ const SnippetList = () => {
 
   return (
     <>
-      <motion.ul role="list" className="snippets">
+      <motion.ul
+        role="list"
+        className={`snippets ${fetchedSnippets && fetchedSnippets.length === 0 ? "data-empty" : ""}`}
+      >
         <AnimatePresence mode="popLayout">
-          {fetchedSnippets.map((snippet, idx) => {
+          {fetchedSnippets && fetchedSnippets.length === 0 && (
+            <div className="category-no-snippets-found">
+              <p>No snippets found for this category. Why not add one? 🚀</p>
+              <a
+                href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="styled-link"
+              >
+                Add your own snippet
+              </a>
+            </div>
+          )}
+          {fetchedSnippets?.map((snippet, idx) => {
             const uniqueId = `${language.name}-${snippet.title}`;
             return (
               <motion.li
diff --git a/src/styles/main.css b/src/styles/main.css
index 5ffc06ef..5ebd9b28 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -220,6 +220,10 @@ abbr {
   --_flow-space: 2rem;
 }
 
+.flow:has(.data-empty) {
+  height: 100%;
+}
+
 /* Text */
 .main-title {
   font-size: var(--fs-800);
@@ -565,7 +569,7 @@ abbr {
  * 1. Responsive grid that adjusts columns automatically
  *    Each item has a minimum width of 17.5rem and maximum of 100%
  */
-.snippets {
+.snippets:not(.data-empty) {
   display: grid;
   gap: 1.5rem;
   grid-template-columns: repeat(
@@ -604,6 +608,13 @@ abbr {
   color: var(--clr-text-secondary);
 }
 
+.category-no-snippets-found {
+  text-align: center;
+  font-size: var(--fs-500);
+  color: var(--clr-text-primary);
+  padding: 1rem;
+  height: 100%;
+}
 /*------------------------------------*\
   #MODAL
 \*------------------------------------*/

From 772497fdddfd67f3fc827351e5114f304ba5f38e Mon Sep 17 00:00:00 2001
From: ACR1209 <andrescoronel1209@gmail.comraisl>
Date: Mon, 3 Feb 2025 17:16:29 -0500
Subject: [PATCH 2/2] Fix linting

---
 src/components/SnippetList.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx
index a93902b6..ab986886 100644
--- a/src/components/SnippetList.tsx
+++ b/src/components/SnippetList.tsx
@@ -18,9 +18,9 @@ const SnippetList = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const { fetchedSnippets, loading } = useSnippets();
   const { language, subLanguage, snippet, setSnippet } = useAppContext();
- 
+
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-       
+
   const shouldReduceMotion = useReducedMotion();
 
   const handleOpenModal = (selected: SnippetType) => () => {
@@ -54,7 +54,7 @@ const SnippetList = () => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchedSnippets, searchParams]);
-  
+
   if (loading) return null;
 
   return (