perf: load Toast asynchronously (#851)

src-build/template.html

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

src/routes/_actions/block.js

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

src/routes/_actions/compose.js

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

src/routes/_actions/copyText.js

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

src/routes/_actions/delete.js

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

src/routes/_actions/favorite.js

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

src/routes/_actions/follow.js

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

src/routes/_actions/instances.js

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

src/routes/_actions/media.js

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

src/routes/_actions/mute.js

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

src/routes/_actions/muteConversation.js

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

src/routes/_actions/pin.js

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

src/routes/_actions/reblog.js

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

src/routes/_actions/requests.js

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

src/routes/_actions/search.js

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

src/routes/_actions/setDomainBlocked.js

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

src/routes/_actions/setShowReblogs.js

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

src/routes/_actions/timeline.js

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

src/routes/_components/AccountsListPage.html

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

src/routes/_components/dialog/components/CopyDialog.html

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

src/routes/_components/settings/instance/PushNotificationSettings.html

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

src/routes/_components/toast/toast.js

@@ -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 }

src/routes/_pages/pinned.html

@@ -31,7 +31,7 @@
   import { store } from '../_store/store'
   import LoadingPage from '../_components/LoadingPage.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 { getPinnedStatuses } from '../_api/pinnedStatuses'
   import { updateVerifyCredentialsForInstance } from '../_actions/instances'

src/routes/_store/observers/onlineObservers.js

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

src/routes/_utils/asyncModules.js

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

src/routes/_utils/serviceWorkerClient.js

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

src/routes/_utils/toast.js

@@ -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 }