<div class="accounts-page"> {{#if loading}} <LoadingPage /> {{elseif accounts && accounts.length}} <ul class="accounts-results"> {{#each accounts as account}} <AccountSearchResult :account /> {{/each}} </ul> {{/if}} </div> <style> .accounts-page { min-height: 60vh; padding: 20px 20px; position: relative; } .accounts-results { list-style: none; box-sizing: border-box; border: 1px solid var(--main-border); border-radius: 2px; } @media (max-width: 767px) { .accounts-page { padding: 20px 10px; } } </style> <script> import { store } from '../_store/store' import LoadingPage from '../_components/LoadingPage.html' import AccountSearchResult from '../_components/search/AccountSearchResult.html' import { toast } from '../_utils/toast' export default { async oncreate() { let accountsFetcher = this.get('accountsFetcher') try { // TODO: paginate let accounts = await accountsFetcher() this.set({ accounts: accounts }) } catch (e) { toast.say('Error: ' + (e.name || '') + ' ' + (e.message || '')) } finally { this.set({loading: false}) } }, data: () => ({ loading: true, accounts: [] }), store: () => store, components: { LoadingPage, AccountSearchResult } } </script>