perf: load Toast asynchronously (#851)
This commit is contained in:
parent
59f9be448d
commit
4ab9687200
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 () {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
22
src/routes/_components/toast/toast.js
Normal file
22
src/routes/_components/toast/toast.js
Normal 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 }
|
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 }
|
|
Loading…
Reference in a new issue