Home – Cases Study

Digital House

Pr

ject

Pr

ject

We Turn Every Partnership Into A Success Story — Powered By Creativity And Innovation.

We Turn Every Partnership Into A Success Story — Powered By

Creativity And Innovation.

Filter By :
  • All Services
  • Web Development
  • Seo
  • PPC And Paid Search
  • Social Media
  • All Business
  • Fitness
  • Real Estate
  • E-Commerce
  • Hospitality

Let's discuss
your project.

Leave your details and we will contact with you

Blank Form (#5)

${titleText}

${formatDate(post.date)} /

${excerptText}

Read More
`; return card; } // Skeleton loader creation function createSkeleton() { const skeleton = document.createElement("article"); skeleton.className = "dg-blog-card skeleton"; skeleton.innerHTML = `
`; return skeleton; } // Show skeleton loaders while posts are loading function showSkeletons() { for (let i = 0; i < postsPerPage; i++) { gridEl.appendChild(createSkeleton()); } } // Hide skeletons and append the posts once fetched function hideSkeletons(posts) { gridEl.innerHTML = ''; // Remove skeletons const fragment = document.createDocumentFragment(); posts.forEach((post) => { fragment.appendChild(createCard(post)); }); gridEl.appendChild(fragment); } async function loadCategories() { try { const res = await fetch( `${apiRoot}/categories?per_page=100&orderby=name&order=asc&hide_empty=true` ); if (!res.ok) return; const categories = await res.json(); categories.forEach((cat) => { const btn = document.createElement("button"); btn.className = "dg-blog-filter-btn"; btn.textContent = cat.name; btn.dataset.cat = cat.id; filterWrap.appendChild(btn); }); } catch (e) { console.error("Category fetch error:", e); } } async function loadPosts(reset = false) { if (isLoading || (!hasMore && !reset)) return; isLoading = true; loadMoreBtn.disabled = true; statusEl.textContent = "Loading..."; if (reset) { currentPage = 1; hasMore = true; gridEl.innerHTML = ""; showSkeletons(); // Display skeletons during the first load } let url = `${apiRoot}/posts?per_page=${postsPerPage}&page=${currentPage}&_embed=1`; if (currentCategory) { url += `&categories=${currentCategory}`; } try { const res = await fetch(url); if (!res.ok) { hasMore = false; statusEl.textContent = "No more posts."; loadMoreBtn.style.display = "none"; return; } const totalPages = parseInt(res.headers.get("X-WP-TotalPages") || "1", 10); const posts = await res.json(); hideSkeletons(posts); if (currentPage >= totalPages || posts.length < postsPerPage) { hasMore = false; loadMoreBtn.style.display = "none"; statusEl.textContent = "You’ve reached the end."; } else { hasMore = true; currentPage += 1; loadMoreBtn.disabled = false; statusEl.textContent = ""; } } catch (err) { console.error("Posts fetch error:", err); statusEl.textContent = "Error loading posts."; loadMoreBtn.disabled = false; } finally { isLoading = false; } } // filter click filterWrap.addEventListener("click", function (e) { const btn = e.target.closest(".dg-blog-filter-btn"); if (!btn) return; filterWrap .querySelectorAll(".dg-blog-filter-btn") .forEach((b) => b.classList.remove("dg-active")); btn.classList.add("dg-active"); currentCategory = btn.dataset.cat || ""; loadMoreBtn.style.display = "inline-block"; loadPosts(true); }); // load more click loadMoreBtn.addEventListener("click", function () { loadPosts(false); }); // faster perceived load: posts first, then categories loadPosts(true); loadCategories(); })();