Couple ideas on how to improve loading times:
- Show the cache content and do not wait for the sync
When there is any data for given period
|
async getTransactions( |
|
{ startBlock = this.requestFactoryStartBlock, endBlock = 'latest' }, |
|
cache = this.cacheDefault, |
|
onlyAddresses = false |
|
) { |
|
if (this.running && (cache || endBlock == 'latest')) { |
|
if (this.allTransactionsAddresses.length > 0) { |
|
return onlyAddresses ? this.allTransactionsAddresses : this._cache.transactions; |
|
} |
|
|
|
if (this.syncing) { |
|
await this.awaitSync(); |
|
return onlyAddresses ? this.allTransactionsAddresses : this._cache.transactions; |
|
} |
|
} |
This will end up with much better UX as returning users will get the data immediatelly.
- Decouple slow operations from fast
Showing transactions from the bucket is fast, while reading for events in order to see the status is slow. When showing transaction list, display transactions from the bucket first and then load the statuses (use some loader animation instead of value, or show known value + loader)
- Improve cache speed
Avoid heavy serialization/deserialization and writes
|
addRequestCreatedLogToCache(log) { |
|
const logs = this._storage.load(REQUEST_LOGS_CACHE_KEY); |
|
let newLogs; |
|
|
|
if (logs) { |
|
newLogs = JSON.parse(logs); |
|
|
|
const exists = newLogs.find(cachedLog => cachedLog.args.request === log.args.request); |
|
|
|
if (!exists) { |
|
newLogs.push(log); |
|
} |
|
} else { |
|
newLogs = [log]; |
|
} |
|
|
|
this._storage.save(REQUEST_LOGS_CACHE_KEY, JSON.stringify(newLogs)); |
|
this._storage.save(REQUEST_LOGS_END_BLOCK_CACHE_KEY, log.blockNumber); |
|
|
|
this.loadRequestCreatedLogsFromStorage(); |
|
} |
Should take advantage of insert/update of indexedDb.
Couple ideas on how to improve loading times:
When there is any data for given period
eth-alarm-clock-dapp/app/stores/TransactionFetcher.js
Lines 282 to 296 in 6a25b3c
This will end up with much better UX as returning users will get the data immediatelly.
Showing transactions from the bucket is fast, while reading for events in order to see the status is slow. When showing transaction list, display transactions from the bucket first and then load the statuses (use some loader animation instead of value, or show known value + loader)
Avoid heavy serialization/deserialization and writes
eth-alarm-clock-dapp/app/stores/TransactionCache.js
Lines 100 to 120 in 6a25b3c
Should take advantage of insert/update of indexedDb.