<tweak> Enhance SnippetList component to handle loading state and display message when no snippets are found

Author: ACR1209

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

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
 \*------------------------------------*/