- + + + + + + + + + + + + + + + - - + + + + @@ -487,14 +505,19 @@ }) }); - let lastPage + const pagesData = { + openedPages: [] + } + + let responseLoader + let requestLoader async function showPage(targetPage, options = {}) { const { firstLoad, hashChange } = options let pageId let searchParams let params if (targetPage === '') { - pageId = 'homepage' + pageId = 'dashboard' }else { if(targetPage.includes('/')){ if (targetPage.includes('?')) { @@ -525,6 +548,9 @@ getRef('generated_flo_id').value = floID getRef('generated_private_key').value = privKey break; + case 'transaction': + const {requestId} = params + break; } document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely') getRef(pageId)?.classList.remove('hide-completely') @@ -540,7 +566,6 @@ duration: 300, easing: 'ease' }) - lastPage = pageId }else if(appSubPages.includes(pageId)){ switch (pageId) { case 'dashboard': @@ -553,8 +578,21 @@ .catch(error => notify(error, 'error')) break; case 'notifications': - renderResponses() - break + if(pagesData.openedPages.includes(pageId)){ + responseLoader.reset() + }else{ + responseLoader = new LazyLoader('#all_responses_list', getArrayOfObj(bank_app.viewAllResponses()).reverse(), render.responseCard, {batchSize: 10}) + responseLoader.init() + } + break; + case 'transactions': + if(pagesData.openedPages.includes(pageId)){ + requestLoader.reset() + }else{ + requestLoader = new LazyLoader('#all_requests_list', getRequests(), render.requestCard, {batchSize: 10}) + requestLoader.init() + } + break; } if(getRef('homepage').classList.contains('hide-completely')){ document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely') @@ -579,13 +617,85 @@ easing: 'ease' }) } + pagesData.lastPage = pageId + if(!pagesData.openedPages.includes(pageId)){ + pagesData.openedPages.push(pageId) + } } - + // class based lazy loading + class LazyLoader{ + constructor(container, arrayOfElements, renderFn, options = {}){ + const {batchSize = 10} = options + this.arrayOfElements = arrayOfElements + this.renderFn = renderFn + this.intersectionObserver + + this.batchSize = batchSize + + this.lazyContainer = document.querySelector(container) + + this.render = this.render.bind(this) + this.init = this.init.bind(this) + this.clear = this.clear.bind(this) + } + init(){ + this.intersectionObserver = new IntersectionObserver((entries, observer) => { + entries.forEach(entry => { + if(entry.isIntersecting){ + observer.disconnect() + this.render({lazyLoad: true}) + } + }) + },{ + threshold: 0.3 + }) + this.mutationObserver = new MutationObserver(mutationList => { + mutationList.forEach(mutation => { + if (mutation.type === 'childList') { + if (mutation.addedNodes.length) { + this.intersectionObserver.observe(this.lazyContainer.lastElementChild) + } + } + }) + }) + this.mutationObserver.observe(this.lazyContainer, { + childList: true, + }) + this.render() + console.log(this.arrayOfElements.length) + } + render(options = {}) { + let {lazyLoad = false} = options + const frag = document.createDocumentFragment(); + if(lazyLoad){ + this.updateStartIndex = this.updateEndIndex + this.updateEndIndex = this.arrayOfElements.length > this.updateEndIndex + this.batchSize ? this.updateEndIndex + this.batchSize : this.arrayOfElements.length + }else{ + this.intersectionObserver.disconnect() + this.lazyContainer.innerHTML = ``; + this.updateStartIndex = 0 + this.updateEndIndex = this.arrayOfElements.length > this.batchSize ? this.batchSize : this.arrayOfElements.length + } + for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) { + frag.append(this.renderFn(this.arrayOfElements[index])) + } + this.lazyContainer.append(frag) + } + clear(){ + this.intersectionObserver.disconnect() + this.mutationObserver.disconnect() + this.lazyContainer.innerHTML = ``; + } + reset(){ + this.render() + } + } +