Commit 91d290e

authored

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

Remove blinking arrow and add message for empty categories

2 parents d9bdf59 + 772497f commit 91d290eCopy full SHA for 91d290e

File tree

2 files changed

+34

-13

lines changed

src
- components
  - SnippetList.tsx
- styles
  - main.css

2 files changed

+34

-13

lines changed

`‎src/components/SnippetList.tsx`

Lines changed: 22 additions & 12 deletions

Original file line number	Diff line number	Diff line change
`@@ -12,18 +12,17 @@ import {`
`12`	`12`	`} from "@utils/languageUtils";`
`13`	`13`	`import { slugify } from "@utils/slugify";`
`14`	`14`
`15`		`-import { LeftAngleArrowIcon } from "./Icons";`
`16`	`15`	`import SnippetModal from "./SnippetModal";`
`17`	`16`
`18`	`17`	`const SnippetList = () => {`
`19`	`18`	`const [searchParams, setSearchParams] = useSearchParams();`
`20`		`- const shouldReduceMotion = useReducedMotion();`
`21`		`-`
	`19`	`+ const { fetchedSnippets, loading } = useSnippets();`
`22`	`20`	`const { language, subLanguage, snippet, setSnippet } = useAppContext();`
`23`		`- const { fetchedSnippets } = useSnippets();`
`24`	`21`
`25`	`22`	`const [isModalOpen, setIsModalOpen] = useState<boolean>(false);`
`26`	`23`
	`24`	`+ const shouldReduceMotion = useReducedMotion();`
	`25`	`+`
`27`	`26`	`const handleOpenModal = (selected: SnippetType) => () => {`
`28`	`27`	`setIsModalOpen(true);`
`29`	`28`	`setSnippet(selected);`
`@@ -56,18 +55,29 @@ const SnippetList = () => {`
`56`	`55`	`// eslint-disable-next-line react-hooks/exhaustive-deps`
`57`	`56`	`}, [fetchedSnippets, searchParams]);`
`58`	`57`
`59`		`- if (!fetchedSnippets) {`
`60`		`- return (`
`61`		`- <div>`
`62`		`- <LeftAngleArrowIcon />`
`63`		`- </div>`
`64`		`- );`
`65`		`- }`
	`58`	`+ if (loading) return null;`
`66`	`59`
`67`	`60`	`return (`
`68`	`61`	`<>`
`69`		`- <motion.ul role="list" className="snippets">`
	`62`	`+ <motion.ul`
	`63`	`+ role="list"`
	`64`	+ className={`snippets ${fetchedSnippets && fetchedSnippets.length === 0 ? "data-empty" : ""}`}
	`65`	`+ >`
`70`	`66`	`<AnimatePresence mode="popLayout">`
	`67`	`+ {fetchedSnippets && fetchedSnippets.length === 0 && (`
	`68`	`+ <div className="category-no-snippets-found">`
	`69`	`+ <p>No snippets found for this category. Why not add one? 🚀</p>`
	`70`	`+ <a`
	`71`	`+ href="https://github.com/dostonnabotov/quicksnip/blob/main/CONTRIBUTING.md"`
	`72`	`+ target="_blank"`
	`73`	`+ rel="noopener noreferrer"`
	`74`	`+ className="styled-link"`
	`75`	`+ >`
	`76`	`+ Add your own snippet`
	`77`	`+ </a>`
	`78`	`+ </div>`
	`79`	`+ )}`
	`80`	`+`
`71`	`81`	`{fetchedSnippets.map((snippet, idx) => {`
`72`	`82`	const uniqueId = `${language.name}-${snippet.title}-${idx}`;
`73`	`83`	`return (`

`‎src/styles/main.css`

Lines changed: 12 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -221,6 +221,10 @@ abbr {`
`221`	`221`	`--_flow-space: 2rem;`
`222`	`222`	`}`
`223`	`223`
	`224`	`+.flow:has(.data-empty) {`
	`225`	`+ height: 100%;`
	`226`	`+}`
	`227`	`+`
`224`	`228`	`/* Text */`
`225`	`229`	`.main-title {`
`226`	`230`	`font-size: var(--fs-800);`
`@@ -592,7 +596,7 @@ abbr {`
`592`	`596`	`* 1. Responsive grid that adjusts columns automatically`
`593`	`597`	`* Each item has a minimum width of 17.5rem and maximum of 100%`
`594`	`598`	`*/`
`595`		`-.snippets {`
	`599`	`+.snippets:not(.data-empty) {`
`596`	`600`	`display: grid;`
`597`	`601`	`gap: 1.5rem;`
`598`	`602`	`grid-template-columns: repeat(`
`@@ -631,6 +635,13 @@ abbr {`
`631`	`635`	`color: var(--clr-text-secondary);`
`632`	`636`	`}`
`633`	`637`
	`638`	`+.category-no-snippets-found {`
	`639`	`+ text-align: center;`
	`640`	`+ font-size: var(--fs-500);`
	`641`	`+ color: var(--clr-text-primary);`
	`642`	`+ padding: 1rem;`
	`643`	`+ height: 100%;`
	`644`	`+}`
`634`	`645`	`/------------------------------------\`
`635`	`646`	`#MODAL`
`636`	`647`	`\------------------------------------/`

0 commit comments

Comments

(0)

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Commit 91d290e

File tree

2 files changed

2 files changed

`‎src/components/SnippetList.tsx`

`‎src/styles/main.css`

0 commit comments