perf: load Toast asynchronously (#851)

This commit is contained in:
Nolan Lawson 2018-12-22 15:37:51 -08:00 committed by GitHub
parent 59f9be448d
commit 4ab9687200
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 52 additions and 44 deletions

View file

@ -43,7 +43,7 @@
<div id='sapper'>%sapper.html%</div> <div id='sapper'>%sapper.html%</div>
<!-- Toast.html gets rendered here --> <!-- Toast.html gets rendered here -->
<div id="toast"></div> <div id="theToast"></div>
<!-- LoadingMask.html gets rendered here --> <!-- LoadingMask.html gets rendered here -->
<div id="loading-mask" aria-hidden="true"></div> <div id="loading-mask" aria-hidden="true"></div>

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { blockAccount, unblockAccount } from '../_api/block' import { blockAccount, unblockAccount } from '../_api/block'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { updateLocalRelationship } from './accounts' import { updateLocalRelationship } from './accounts'
import { emit } from '../_utils/eventBus' import { emit } from '../_utils/eventBus'

View file

@ -1,5 +1,5 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { postStatus as postStatusToServer } from '../_api/statuses' import { postStatus as postStatusToServer } from '../_api/statuses'
import { addStatusOrNotification } from './addStatusOrNotification' import { addStatusOrNotification } from './addStatusOrNotification'
import { database } from '../_database/database' import { database } from '../_database/database'

View file

@ -1,5 +1,5 @@
import { importShowCopyDialog } from '../_components/dialog/asyncDialogs' import { importShowCopyDialog } from '../_components/dialog/asyncDialogs'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
export async function copyText (text) { export async function copyText (text) {
if (navigator.clipboard) { // not supported in all browsers if (navigator.clipboard) { // not supported in all browsers

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { deleteStatus } from '../_api/delete' import { deleteStatus } from '../_api/delete'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { deleteStatus as deleteStatusLocally } from './deleteStatuses' import { deleteStatus as deleteStatusLocally } from './deleteStatuses'
export async function doDeleteStatus (statusId) { export async function doDeleteStatus (statusId) {

View file

@ -1,6 +1,6 @@
import { favoriteStatus, unfavoriteStatus } from '../_api/favorite' import { favoriteStatus, unfavoriteStatus } from '../_api/favorite'
import { store } from '../_store/store' import { store } from '../_store/store'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { database } from '../_database/database' import { database } from '../_database/database'
export async function setFavorited (statusId, favorited) { export async function setFavorited (statusId, favorited) {

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { followAccount, unfollowAccount } from '../_api/follow' import { followAccount, unfollowAccount } from '../_api/follow'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { updateLocalRelationship } from './accounts' import { updateLocalRelationship } from './accounts'
export async function setAccountFollowed (accountId, follow, toastOnSuccess) { export async function setAccountFollowed (accountId, follow, toastOnSuccess) {

View file

@ -1,7 +1,7 @@
import { getVerifyCredentials } from '../_api/user' import { getVerifyCredentials } from '../_api/user'
import { store } from '../_store/store' import { store } from '../_store/store'
import { switchToTheme } from '../_utils/themeEngine' import { switchToTheme } from '../_utils/themeEngine'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { goto } from '../../../__sapper__/client' import { goto } from '../../../__sapper__/client'
import { cacheFirstUpdateAfter } from '../_utils/sync' import { cacheFirstUpdateAfter } from '../_utils/sync'
import { getInstanceInfo } from '../_api/instance' import { getInstanceInfo } from '../_api/instance'

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { uploadMedia } from '../_api/media' import { uploadMedia } from '../_api/media'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { scheduleIdleTask } from '../_utils/scheduleIdleTask' import { scheduleIdleTask } from '../_utils/scheduleIdleTask'
export async function doMediaUpload (realm, file) { export async function doMediaUpload (realm, file) {

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { muteAccount, unmuteAccount } from '../_api/mute' import { muteAccount, unmuteAccount } from '../_api/mute'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { updateLocalRelationship } from './accounts' import { updateLocalRelationship } from './accounts'
import { emit } from '../_utils/eventBus' import { emit } from '../_utils/eventBus'

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { muteConversation, unmuteConversation } from '../_api/muteConversation' import { muteConversation, unmuteConversation } from '../_api/muteConversation'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { database } from '../_database/database' import { database } from '../_database/database'
export async function setConversationMuted (statusId, mute, toastOnSuccess) { export async function setConversationMuted (statusId, mute, toastOnSuccess) {

View file

@ -1,5 +1,5 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { pinStatus, unpinStatus } from '../_api/pin' import { pinStatus, unpinStatus } from '../_api/pin'
import { database } from '../_database/database' import { database } from '../_database/database'
import { emit } from '../_utils/eventBus' import { emit } from '../_utils/eventBus'

View file

@ -1,5 +1,5 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { reblogStatus, unreblogStatus } from '../_api/reblog' import { reblogStatus, unreblogStatus } from '../_api/reblog'
import { database } from '../_database/database' import { database } from '../_database/database'

View file

@ -1,7 +1,7 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { approveFollowRequest, rejectFollowRequest } from '../_api/requests' import { approveFollowRequest, rejectFollowRequest } from '../_api/requests'
import { emit } from '../_utils/eventBus' import { emit } from '../_utils/eventBus'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
export async function setFollowRequestApprovedOrRejected (accountId, approved, toastOnSuccess) { export async function setFollowRequestApprovedOrRejected (accountId, approved, toastOnSuccess) {
let { let {

View file

@ -1,5 +1,5 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { search } from '../_api/search' import { search } from '../_api/search'
export async function doSearch () { export async function doSearch () {

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { blockDomain, unblockDomain } from '../_api/blockDomain' import { blockDomain, unblockDomain } from '../_api/blockDomain'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { updateRelationship } from './accounts' import { updateRelationship } from './accounts'
export async function setDomainBlocked (accountId, domain, block, toastOnSuccess) { export async function setDomainBlocked (accountId, domain, block, toastOnSuccess) {

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { setShowReblogs as setShowReblogsApi } from '../_api/showReblogs' import { setShowReblogs as setShowReblogsApi } from '../_api/showReblogs'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { updateLocalRelationship } from './accounts' import { updateLocalRelationship } from './accounts'
export async function setShowReblogs (accountId, showReblogs, toastOnSuccess) { export async function setShowReblogs (accountId, showReblogs, toastOnSuccess) {

View file

@ -1,6 +1,6 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { getTimeline } from '../_api/timelines' import { getTimeline } from '../_api/timelines'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import { mark, stop } from '../_utils/marks' import { mark, stop } from '../_utils/marks'
import { concat, mergeArrays } from '../_utils/arrays' import { concat, mergeArrays } from '../_utils/arrays'
import { byItemIds } from '../_utils/sorting' import { byItemIds } from '../_utils/sorting'

View file

@ -34,7 +34,7 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import LoadingPage from './LoadingPage.html' import LoadingPage from './LoadingPage.html'
import AccountSearchResult from './search/AccountSearchResult.html' import AccountSearchResult from './search/AccountSearchResult.html'
import { toast } from '../_utils/toast' import { toast } from './toast/toast'
import { on } from '../_utils/eventBus' import { on } from '../_utils/eventBus'
// TODO: paginate // TODO: paginate

View file

@ -29,7 +29,7 @@
import { show } from '../helpers/showDialog' import { show } from '../helpers/showDialog'
import { close } from '../helpers/closeDialog' import { close } from '../helpers/closeDialog'
import { oncreate as onCreateDialog } from '../helpers/onCreateDialog' import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
import { toast } from '../../../_utils/toast' import { toast } from '../../toast/toast'
import { doubleRAF } from '../../../_utils/doubleRAF' import { doubleRAF } from '../../../_utils/doubleRAF'
export default { export default {
@ -61,4 +61,4 @@
ModalDialog ModalDialog
} }
} }
</script> </script>

View file

@ -39,7 +39,7 @@
import { importShowConfirmationDialog } from '../../dialog/asyncDialogs' import { importShowConfirmationDialog } from '../../dialog/asyncDialogs'
import { logOutOfInstance } from '../../../_actions/instances' import { logOutOfInstance } from '../../../_actions/instances'
import { updatePushSubscriptionForInstance, updateAlerts } from '../../../_actions/pushSubscription' import { updatePushSubscriptionForInstance, updateAlerts } from '../../../_actions/pushSubscription'
import { toast } from '../../../_utils/toast' import { toast } from '../../toast/toast'
export default { export default {
async oncreate () { async oncreate () {
@ -90,4 +90,4 @@
} }
} }
} }
</script> </script>

View file

@ -0,0 +1,22 @@
import { importToast } from '../../_utils/asyncModules'
let toast
const lazyToast = {
async say (text) {
if (!toast) {
let Toast = await importToast()
if (!toast) {
toast = new Toast({
target: document.querySelector('#theToast')
})
if (process.env.NODE_ENV !== 'production') {
window.toast = toast // for debugging
}
}
}
toast.say(text)
}
}
export { lazyToast as toast }

View file

@ -31,7 +31,7 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import LoadingPage from '../_components/LoadingPage.html' import LoadingPage from '../_components/LoadingPage.html'
import StatusSearchResult from '../_components/search/StatusSearchResult.html' import StatusSearchResult from '../_components/search/StatusSearchResult.html'
import { toast } from '../_utils/toast' import { toast } from '../_components/toast/toast'
import DynamicPageBanner from '../_components/DynamicPageBanner.html' import DynamicPageBanner from '../_components/DynamicPageBanner.html'
import { getPinnedStatuses } from '../_api/pinnedStatuses' import { getPinnedStatuses } from '../_api/pinnedStatuses'
import { updateVerifyCredentialsForInstance } from '../_actions/instances' import { updateVerifyCredentialsForInstance } from '../_actions/instances'

View file

@ -1,5 +1,5 @@
import debounce from 'lodash-es/debounce' import debounce from 'lodash-es/debounce'
import { toast } from '../../_utils/toast' import { toast } from '../../_components/toast/toast'
const OFFLINE_DELAY = 5000 const OFFLINE_DELAY = 5000
const NOTIFY_OFFLINE_LIMIT = 1 const NOTIFY_OFFLINE_LIMIT = 1

View file

@ -39,3 +39,7 @@ export const importLoggedInObservers = () => import(
export const importEmojiMart = () => import( export const importEmojiMart = () => import(
/* webpackChunkName: 'createEmojiMartPickerFromData.js' */ '../_react/createEmojiMartPickerFromData.js' /* webpackChunkName: 'createEmojiMartPickerFromData.js' */ '../_react/createEmojiMartPickerFromData.js'
).then(getDefault) ).then(getDefault)
export const importToast = () => import(
/* webpackChunkName: 'Toast.html' */ '../_components/toast/Toast.html'
).then(getDefault)

View file

@ -1,4 +1,4 @@
import { toast } from './toast' import { toast } from '../_components/toast/toast'
function onUpdateFound (registration) { function onUpdateFound (registration) {
const newWorker = registration.installing const newWorker = registration.installing

View file

@ -1,18 +0,0 @@
import Toast from '../_components/Toast.html'
let toast
if (process.browser) {
toast = new Toast({
target: document.querySelector('#toast')
})
if (process.env.NODE_ENV !== 'production') {
window.toast = toast // for debugging
}
} else {
toast = {
say: () => {}
}
}
export { toast }