Merge pull request #245 from ACR1209/tweak/fix-loading-state-blinking-arrow

Remove blinking arrow and add message for empty categories

Author: technoph1le

src/components/SnippetList.tsx

@@ -12,18 +12,17 @@ import {
 } from "@utils/languageUtils";
 import { slugify } from "@utils/slugify";
 
-import { LeftAngleArrowIcon } from "./Icons";
 import SnippetModal from "./SnippetModal";
 
 const SnippetList = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const shouldReduceMotion = useReducedMotion();
-
+  const { fetchedSnippets, loading } = useSnippets();
   const { language, subLanguage, snippet, setSnippet } = useAppContext();
-  const { fetchedSnippets } = useSnippets();
 
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
+  const shouldReduceMotion = useReducedMotion();
+
   const handleOpenModal = (selected: SnippetType) => () => {
     setIsModalOpen(true);
     setSnippet(selected);
@@ -56,18 +55,29 @@ const SnippetList = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetchedSnippets, searchParams]);
 
-  if (!fetchedSnippets) {
-    return (
-      <div>
-        <LeftAngleArrowIcon />
-      </div>
-    );
-  }
+  if (loading) return null;
 
   return (
     <>
-      <motion.ul role="list" className="snippets">
+      <motion.ul
+        role="list"
+        className={`snippets ${fetchedSnippets && fetchedSnippets.length === 0 ? "data-empty" : ""}`}
+      >
         <AnimatePresence mode="popLayout">
+          {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}-${idx}`;
             return (

src/styles/main.css

@@ -221,6 +221,10 @@ abbr {
   --_flow-space: 2rem;
 }
 
+.flow:has(.data-empty) {
+  height: 100%;
+}
+
 /* Text */
 .main-title {
   font-size: var(--fs-800);
@@ -592,7 +596,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(
@@ -631,6 +635,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
 \*------------------------------------*/