Display initialization message (#8573)

Implements #8525

[Screencast from 18-12-23 14:40:29.webm](https://github.com/enso-org/enso/assets/1428930/c7db2a9d-0020-4bce-b44c-d6712df58098)

# Important Notes
Previously, we re-used the API from the dashboard. But this mechanism is brittle and is currently even broken with the new GUI. So instead, I just used the Vue equivalent toast API, which seems easier to use.

app/gui2/src/components/GraphEditor.vue

@@ -30,7 +30,8 @@ import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import * as set from 'lib0/set'
 import type { ExprId, NodeMetadata } from 'shared/yjsModel'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { toast } from 'vue3-toastify'
 import { type Usage } from './ComponentBrowser/input'
 
 const EXECUTION_MODES = ['design', 'live']
@@ -50,6 +51,26 @@ const componentBrowserUsage = ref<Usage>({ type: 'newNode' })
 const suggestionDb = useSuggestionDbStore()
 const interaction = provideInteractionHandler()
 
+function initStartupToast() {
+  const startupToast = toast.info('Initializing the project. This can take up to one minute.', {
+    autoClose: false,
+  })
+  projectStore.firstExecution.then(() => {
+    if (startupToast != null) {
+      toast.remove(startupToast)
+    }
+  })
+  onUnmounted(() => {
+    if (startupToast != null) {
+      toast.remove(startupToast)
+    }
+  })
+}
+
+onMounted(() => {
+  initStartupToast()
+})
+
 const nodeSelection = provideGraphSelection(graphNavigator, graphStore.nodeRects, {
   onSelected(id) {
     graphStore.db.moveNodeToTop(id)
@@ -522,6 +543,14 @@ function handleEdgeDrop(source: ExprId, position: Vec2) {
     @dragover.prevent
     @drop.prevent="handleFileDrop($event)"
   >
+    <ToastContainer
+      position="top-center"
+      theme="light"
+      closeOnClick="false"
+      draggable="false"
+      toastClassName="text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl"
+      transition="Vue-Toastification__bounce"
+    />
     <svg :viewBox="graphNavigator.viewBox">
       <GraphEdges @createNodeFromEdge="handleEdgeDrop" />
     </svg>

app/gui2/src/createApp.ts

@@ -3,6 +3,7 @@ import '@/assets/main.css'
 import type { ApplicationConfig } from '@/util/config'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
+import Vue3Toastify, { type ToastContainerOptions } from 'vue3-toastify'
 
 export function mountProjectApp(rootProps: {
   config: ApplicationConfig
@@ -12,6 +13,13 @@ export function mountProjectApp(rootProps: {
 }) {
   const app = createApp(App, rootProps)
   app.use(createPinia())
+  app.use(Vue3Toastify, {
+    position: 'top-center',
+    theme: 'light',
+    closeOnClick: false,
+    draggable: false,
+    toastClassName: 'text-sm leading-170 bg-frame-selected rounded-2xl backdrop-blur-3xl',
+  } as ToastContainerOptions)
   app.mount('#app')
   return app
 }

package-lock.json

@@ -14,7 +14,8 @@
       ],
       "dependencies": {
         "chromedriver": "^106.0.1",
-        "tslib": "^2.6.2"
+        "tslib": "^2.6.2",
+        "vue3-toastify": "^0.1.14"
       },
       "devDependencies": {
         "npm-run-all": "^4.1.5",
@@ -17711,6 +17712,23 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue3-toastify": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/vue3-toastify/-/vue3-toastify-0.1.14.tgz",
+      "integrity": "sha512-2wyzMhWq8IjTclL25tqKWknDFdFI1vPueMGZpHNlPWf6TBfxBycBANS+2n4W1xD7tHhX4G6HhCe31sle6OpwYQ==",
+      "engines": {
+        "node": ">=16",
+        "npm": ">=7"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",

package.json

@@ -5,7 +5,8 @@
   },
   "dependencies": {
     "chromedriver": "^106.0.1",
-    "tslib": "^2.6.2"
+    "tslib": "^2.6.2",
+    "vue3-toastify": "^0.1.14"
   },
   "name": "root",
   "scripts": {