Skip to content

Commit

Permalink
ASSETS-88926 : Review and Improve Page Performance of Marketing Momen…
Browse files Browse the repository at this point in the history
…t Landing page (Push Failed) (#137)

* feat: Improve page load speed and add lazy loading for images

- Implement debounce for search input to reduce the number of API calls.
- Refactor the `decorate` function for better readability and performance.
- Add lazy loading for images using `IntersectionObserver` to load images only when they come into view.
- Move pagination button toggling to a separate `togglePaginationButtons` function.
- Ensure strict comparison (`===`) for block configuration check.

* feat: Improve page load speed and add lazy loading for images

- Removed debounce for search
- Added lazy loading for images using `IntersectionObserver` to load images only when they come into view.
  • Loading branch information
TyroneAEM authored Jul 12, 2024
1 parent 5151195 commit a40ff9e
Showing 1 changed file with 2 additions and 15 deletions.
17 changes: 2 additions & 15 deletions blocks/gmo-program-list/gmo-program-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,19 +50,7 @@ let totalPages = 0;
let campaignCount = await graphqlCampaignCount();
let blockConfig;

// Debounce function to reduce the number of calls
function debounce(func, delay) {
let debounceTimer;
return function() {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
};
}

//Custom event gmoCampaignListBlock with debounce to allow the gmo-campaign-header to trigger the gmo-program-list to update
document.addEventListener('gmoCampaignListBlock', debounce(async function() {
document.addEventListener('gmoCampaignListBlock', async function() {
//Build graphq filter that is passed to the graphql persisted queries
const graphQLFilterArray = getFilterValues();
const searchInputValue = document.getElementById('campaign-search').value;
Expand All @@ -83,8 +71,7 @@ document.addEventListener('gmoCampaignListBlock', debounce(async function() {
currentNumberPerPage = DEFAULT_ITEMS_PER_PAGE;
//Trigger loading the gmo-campaign-block
decorate( block, currentNumberPerPage, '', false, false, currentGraphqlFilter);
}, 300));

});

export default async function decorate(block, numPerPage = currentNumberPerPage, cursor = '', previousPage = false, nextPage = false, graphQLFilter = {}) {
if (blockConfig == undefined) blockConfig = readBlockConfig(block);
Expand Down

0 comments on commit a40ff9e

Please sign in to comment.