From 4ab9687200d2d504756e88cf47f84138b4c473fe Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 22 Dec 2018 15:37:51 -0800
Subject: [PATCH] perf: load Toast asynchronously (#851)

---
 src-build/template.html                       |  2 +-
 src/routes/_actions/block.js                  |  2 +-
 src/routes/_actions/compose.js                |  2 +-
 src/routes/_actions/copyText.js               |  2 +-
 src/routes/_actions/delete.js                 |  2 +-
 src/routes/_actions/favorite.js               |  2 +-
 src/routes/_actions/follow.js                 |  2 +-
 src/routes/_actions/instances.js              |  2 +-
 src/routes/_actions/media.js                  |  2 +-
 src/routes/_actions/mute.js                   |  2 +-
 src/routes/_actions/muteConversation.js       |  2 +-
 src/routes/_actions/pin.js                    |  2 +-
 src/routes/_actions/reblog.js                 |  2 +-
 src/routes/_actions/requests.js               |  2 +-
 src/routes/_actions/search.js                 |  2 +-
 src/routes/_actions/setDomainBlocked.js       |  2 +-
 src/routes/_actions/setShowReblogs.js         |  2 +-
 src/routes/_actions/timeline.js               |  2 +-
 src/routes/_components/AccountsListPage.html  |  2 +-
 .../dialog/components/CopyDialog.html         |  4 ++--
 .../instance/PushNotificationSettings.html    |  4 ++--
 src/routes/_components/{ => toast}/Toast.html |  0
 src/routes/_components/toast/toast.js         | 22 +++++++++++++++++++
 src/routes/_pages/pinned.html                 |  2 +-
 .../_store/observers/onlineObservers.js       |  2 +-
 src/routes/_utils/asyncModules.js             |  4 ++++
 src/routes/_utils/serviceWorkerClient.js      |  2 +-
 src/routes/_utils/toast.js                    | 18 ---------------
 28 files changed, 52 insertions(+), 44 deletions(-)
 rename src/routes/_components/{ => toast}/Toast.html (100%)
 create mode 100644 src/routes/_components/toast/toast.js
 delete mode 100644 src/routes/_utils/toast.js

diff --git a/src-build/template.html b/src-build/template.html
index ed1444f..1b0976b 100644
--- a/src-build/template.html
+++ b/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>
diff --git a/src/routes/_actions/block.js b/src/routes/_actions/block.js
index ccef11a..f3ac1e0 100644
--- a/src/routes/_actions/block.js
+++ b/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'
 
diff --git a/src/routes/_actions/compose.js b/src/routes/_actions/compose.js
index c0ea935..6074e5c 100644
--- a/src/routes/_actions/compose.js
+++ b/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'
diff --git a/src/routes/_actions/copyText.js b/src/routes/_actions/copyText.js
index f6e9bfd..2e31d15 100644
--- a/src/routes/_actions/copyText.js
+++ b/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
diff --git a/src/routes/_actions/delete.js b/src/routes/_actions/delete.js
index c668f07..421566e 100644
--- a/src/routes/_actions/delete.js
+++ b/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) {
diff --git a/src/routes/_actions/favorite.js b/src/routes/_actions/favorite.js
index 581f8d8..a056437 100644
--- a/src/routes/_actions/favorite.js
+++ b/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) {
diff --git a/src/routes/_actions/follow.js b/src/routes/_actions/follow.js
index 0bdd3ca..12e2ac5 100644
--- a/src/routes/_actions/follow.js
+++ b/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) {
diff --git a/src/routes/_actions/instances.js b/src/routes/_actions/instances.js
index ad06caf..372d3b7 100644
--- a/src/routes/_actions/instances.js
+++ b/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'
diff --git a/src/routes/_actions/media.js b/src/routes/_actions/media.js
index d9d733f..5743403 100644
--- a/src/routes/_actions/media.js
+++ b/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) {
diff --git a/src/routes/_actions/mute.js b/src/routes/_actions/mute.js
index e28ffed..5c38702 100644
--- a/src/routes/_actions/mute.js
+++ b/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'
 
diff --git a/src/routes/_actions/muteConversation.js b/src/routes/_actions/muteConversation.js
index c3ebc9e..ab6b48d 100644
--- a/src/routes/_actions/muteConversation.js
+++ b/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) {
diff --git a/src/routes/_actions/pin.js b/src/routes/_actions/pin.js
index 0d11a24..717b242 100644
--- a/src/routes/_actions/pin.js
+++ b/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'
diff --git a/src/routes/_actions/reblog.js b/src/routes/_actions/reblog.js
index f092dce..1133880 100644
--- a/src/routes/_actions/reblog.js
+++ b/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'
 
diff --git a/src/routes/_actions/requests.js b/src/routes/_actions/requests.js
index 6a9d1f3..3122dd6 100644
--- a/src/routes/_actions/requests.js
+++ b/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 {
diff --git a/src/routes/_actions/search.js b/src/routes/_actions/search.js
index cae11eb..9a98d49 100644
--- a/src/routes/_actions/search.js
+++ b/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 () {
diff --git a/src/routes/_actions/setDomainBlocked.js b/src/routes/_actions/setDomainBlocked.js
index 4306a27..e0c753b 100644
--- a/src/routes/_actions/setDomainBlocked.js
+++ b/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) {
diff --git a/src/routes/_actions/setShowReblogs.js b/src/routes/_actions/setShowReblogs.js
index 516e6ad..1eb404a 100644
--- a/src/routes/_actions/setShowReblogs.js
+++ b/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) {
diff --git a/src/routes/_actions/timeline.js b/src/routes/_actions/timeline.js
index 2e2ecf9..78d3dd9 100644
--- a/src/routes/_actions/timeline.js
+++ b/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'
diff --git a/src/routes/_components/AccountsListPage.html b/src/routes/_components/AccountsListPage.html
index 38883f4..3459c20 100644
--- a/src/routes/_components/AccountsListPage.html
+++ b/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
diff --git a/src/routes/_components/dialog/components/CopyDialog.html b/src/routes/_components/dialog/components/CopyDialog.html
index b6cc57a..849c9c0 100644
--- a/src/routes/_components/dialog/components/CopyDialog.html
+++ b/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 {
@@ -61,4 +61,4 @@
       ModalDialog
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/_components/settings/instance/PushNotificationSettings.html b/src/routes/_components/settings/instance/PushNotificationSettings.html
index a157d59..98aaf1a 100644
--- a/src/routes/_components/settings/instance/PushNotificationSettings.html
+++ b/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 () {
@@ -90,4 +90,4 @@
       }
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/routes/_components/Toast.html b/src/routes/_components/toast/Toast.html
similarity index 100%
rename from src/routes/_components/Toast.html
rename to src/routes/_components/toast/Toast.html
diff --git a/src/routes/_components/toast/toast.js b/src/routes/_components/toast/toast.js
new file mode 100644
index 0000000..ac35fc6
--- /dev/null
+++ b/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 }
diff --git a/src/routes/_pages/pinned.html b/src/routes/_pages/pinned.html
index dc6ee67..f16fa4e 100644
--- a/src/routes/_pages/pinned.html
+++ b/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'
diff --git a/src/routes/_store/observers/onlineObservers.js b/src/routes/_store/observers/onlineObservers.js
index 295565e..ebe9a15 100644
--- a/src/routes/_store/observers/onlineObservers.js
+++ b/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
diff --git a/src/routes/_utils/asyncModules.js b/src/routes/_utils/asyncModules.js
index e08ec8f..7a3e341 100644
--- a/src/routes/_utils/asyncModules.js
+++ b/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)
diff --git a/src/routes/_utils/serviceWorkerClient.js b/src/routes/_utils/serviceWorkerClient.js
index b1e995d..3594953 100644
--- a/src/routes/_utils/serviceWorkerClient.js
+++ b/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
diff --git a/src/routes/_utils/toast.js b/src/routes/_utils/toast.js
deleted file mode 100644
index b706b97..0000000
--- a/src/routes/_utils/toast.js
+++ /dev/null
@@ -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 }