[Docs Site] Align filter/load more logic in changelog (#21753)

* [Docs Site] Align filter/load more logic in changelog

* fix button visibility

* Update src/pages/changelog/index.astro

* Update src/pages/changelog/index.astro

---------

Co-authored-by: Kody Jackson <[email protected]>

Author: 2 people

src/pages/changelog/index.astro

@@ -89,7 +89,7 @@ const props = {
 	<div class="flex items-center justify-center">
 		<button
 			id="changelogs-next-button"
-			class="h-12 cursor-pointer rounded bg-cl1-brand-orange px-6 font-medium text-cl1-black"
+			class="bg-cl1-brand-orange text-cl1-black h-12 cursor-pointer rounded px-6 font-medium"
 		>
 			Load more items
 		</button>
@@ -114,37 +114,26 @@ const props = {
 
 	filter?.addEventListener("change", updateFilter);
 
-	button?.addEventListener("click", () => {
-		const entries = [
-			...document.querySelectorAll<HTMLElement>("[data-products]"),
-		];
-
-		if (!entries) return;
-
-		const value = filter!.value;
-
-		const hidden = entries
-			.filter((e) => {
-				if (e.style.display !== "none") {
-					return false;
-				}
-
-				if (value === "all") {
-					return true;
-				}
-
-				if (!e.dataset.products) {
-					return false;
-				}
+	function filterByProduct(e: HTMLElement, value: string): boolean {
+		if (value === "all") {
+			return true;
+		}
 
-				const products: string[] = JSON.parse(e.dataset.products);
+		if (!e.dataset.products) {
+			return false;
+		}
 
-				if (products.includes(value)) {
-					return true;
-				}
+		const products: string[] = JSON.parse(e.dataset.products);
+		return products.includes(value);
+	}
 
-				return false;
-			})
+	button?.addEventListener("click", () => {
+		const hidden = [
+			...document.querySelectorAll<HTMLElement>("[data-products]"),
+		]
+			.filter(
+				(e) => e.style.display === "none" && filterByProduct(e, filter!.value),
+			)
 			.slice(0, 10);
 
 		hidden.forEach((e) => (e.style.display = ""));
@@ -162,24 +151,8 @@ const props = {
 		const value = filter!.value;
 
 		const filtered = entries
-			.filter((e) => {
-				if (value === "all") {
-					return true;
-				}
-
-				if (!e.dataset.products) {
-					return false;
-				}
-
-				const products: string[] = JSON.parse(e.dataset.products);
-
-				if (products.includes(value)) {
-					return true;
-				}
-
-				return false;
-			})
-			.slice(0, 5);
+			.filter((e) => filterByProduct(e, value))
+			.slice(0, 10);
 
 		for (const entry of entries) {
 			const show = filtered.includes(entry);
@@ -211,30 +184,12 @@ const props = {
 
 		if (entries.length === 0) return;
 
-		const filtered = entries.filter((p) => {
-			const value = filter!.value;
-
-			if (value === "all") {
-				return true;
-			}
-
-			if (!p.dataset.products) {
-				return false;
-			}
-
-			const products: string[] = JSON.parse(p.dataset.products);
-
-			if (!products.includes(value)) {
-				return false;
-			}
-
-			return true;
-		});
+		const filtered = entries.filter((p) => filterByProduct(p, filter!.value));
 
 		const visible = filtered.filter((p) => p.style.display !== "none");
 		const hidden = filtered.length - visible.length;
 
-		if (hidden >= 10) {
+		if (hidden > 0) {
 			button!.style.display = "";
 		} else {
 			button!.style.display = "none";