set timeout for loading message on the main page

[ayrat555]

resolves #2252

Changelog

• set timeout for loading message on the main page

[coveralls]

Pull Request Test Coverage Report for Build 6dde37f0-0ddf-4ffa-9c27-fd7aeaa7ee2a

• 0 of 0 changed or added relevant lines in 0 files are covered.
• 6 unchanged lines in 3 files lost coverage.
• Overall coverage decreased (-0.08%) to 80.93%

---

Files with Coverage Reduction	New Missed Lines	%
apps/indexer/lib/indexer/fetcher/token.ex	1	80.0%
apps/indexer/lib/indexer/fetcher/token_balance.ex	2	87.88%
apps/indexer/lib/indexer/block/fetcher.ex	3	88.31%

Totals
Change from base Build d2833198-1e76-44a9-a77e-3570f9b477b4:	-0.08%
Covered Lines:	5203
Relevant Lines:	6429

---

💛 - Coveralls

[saneery]

what if transactionLoading value changes before the timeout function run?
I mean that first $el.hide() runs, and after $el.show() runs with a delay.
Maybe we should check that transactions weren't loaded before show message in the timeout function.

[vbaranov]

@saneery Could you elaborate, how this case is possible?

[saneery]

@vbaranov in a case with blocksLoading

1. blocksLoading is true
2. showLoading(blocksLoading, $el) is called
3. the timer is created with a delay in 1sec
4. after 0.5 sec blocks are loaded and blocksLoading is changed to false
5. showLoading(blocksLoading, $el) is called and $el is hided
6. after 0.5 sec timer's function is called and $el is showed

But I've tried to debug how blocksLoading is changed. It looks like it doesn't turn into false.
I've set console.log into the code:

'[data-selector="chain-block-list"] [data-selector="loading-message"]': {
    render ($el, state, oldState) {
      console.log(state.blocksLoading)
      showLoader(state.blocksLoading, $el)
    }
  }

and set into showLoading

export function showLoader (isTimeout, loader) {
  if (isTimeout) {
    const timeout = setTimeout(function () {
      console.log('timeout function')
      loader.removeAttr('hidden')
      loader.show()
    }, 1000)
    return timeout
  } else {
    console.log('hide function')
    loader.hide()
    return null
  }
}

And I had this:

[vbaranov]

@saneery However, I would leave else as a general fallback, if you don't have objections