From 9d754a3096522179d3007e6a42812d6ebaf5d04e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Hornych?= <lukashornych@proton.me>
Date: Fri, 15 Sep 2023 23:50:46 +0200
Subject: [PATCH] feat: tab component loading screen support

---
 src/components/base/VLoadingIcon.vue          | 66 +++++++++++++++++++
 .../lab/editor/LabEditorLoadingScreen.vue     | 31 +++++++++
 .../lab/editor/LabEditorTabWindow.vue         |  8 +++
 .../error-viewer/LabEditorErrorViewer.vue     |  5 +-
 .../LabEditorEvitaQLConsole.vue               |  5 +-
 .../LabEditorGraphQLConsole.vue               |  8 +--
 .../schema-viewer/LabEditorSchemaViewer.vue   | 13 ++--
 src/model/editor/editor.ts                    | 10 +++
 8 files changed, 134 insertions(+), 12 deletions(-)
 create mode 100644 src/components/base/VLoadingIcon.vue
 create mode 100644 src/components/lab/editor/LabEditorLoadingScreen.vue

diff --git a/src/components/base/VLoadingIcon.vue b/src/components/base/VLoadingIcon.vue
new file mode 100644
index 00000000..4436e4c6
--- /dev/null
+++ b/src/components/base/VLoadingIcon.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+/**
+ * Loading spinner icon made by Fran Pérez https://codepen.io/mrrocks/pen/ExLovj
+ */
+</script>
+
+<template>
+    <svg class="spinner" width="1.5rem" height="1.5rem" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
+        <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
+    </svg>
+</template>
+
+<style lang="scss" scoped>
+// This is just to center the spinner
+
+html, body { height: 100%; }
+
+body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// Here is where the magic happens
+
+$offset: 187;
+$duration: 1.4s;
+
+.spinner {
+    animation: rotator $duration linear infinite;
+}
+
+@keyframes rotator {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(270deg); }
+}
+
+.path {
+    stroke-dasharray: $offset;
+    stroke-dashoffset: 0;
+    transform-origin: center;
+    animation:
+        dash $duration ease-in-out infinite,
+        colors ($duration*4) ease-in-out infinite;
+}
+
+@keyframes colors {
+    0% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+    25% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+    50% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+    75% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+    100% { stroke: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); }
+}
+
+@keyframes dash {
+    0% { stroke-dashoffset: $offset; }
+    50% {
+        stroke-dashoffset: $offset/4;
+        transform:rotate(135deg);
+    }
+    100% {
+        stroke-dashoffset: $offset;
+        transform:rotate(450deg);
+    }
+}
+</style>
diff --git a/src/components/lab/editor/LabEditorLoadingScreen.vue b/src/components/lab/editor/LabEditorLoadingScreen.vue
new file mode 100644
index 00000000..fcdf416d
--- /dev/null
+++ b/src/components/lab/editor/LabEditorLoadingScreen.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * Generic loading screen to display while a tab component is being initialized.
+ */
+
+import VLoadingIcon from '@/components/base/VLoadingIcon.vue'
+</script>
+
+<template>
+    <div class="loading-screen">
+        <div class="loading-screen-info">
+            <VLoadingIcon width="3rem" height="3rem"/>
+            <span>Loading, please wait ...</span>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.loading-screen {
+    display: grid;
+    align-items: center;
+    justify-items: center;
+}
+
+.loading-screen-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+</style>
diff --git a/src/components/lab/editor/LabEditorTabWindow.vue b/src/components/lab/editor/LabEditorTabWindow.vue
index 1365647c..f2308929 100644
--- a/src/components/lab/editor/LabEditorTabWindow.vue
+++ b/src/components/lab/editor/LabEditorTabWindow.vue
@@ -1,17 +1,25 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import LabEditorLoadingScreen from '@/components/lab/editor/LabEditorLoadingScreen.vue'
+
 const props = defineProps<{
     component: any,
     componentProps: any
 }>()
+
+const componentReady = ref<boolean>(false)
 </script>
 
 <template>
     <KeepAlive>
         <Component
+            v-show="componentReady"
             :is="component"
             v-bind="componentProps"
+            @ready="componentReady = true"
         />
     </KeepAlive>
+    <LabEditorLoadingScreen v-if="!componentReady" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/lab/editor/error-viewer/LabEditorErrorViewer.vue b/src/components/lab/editor/error-viewer/LabEditorErrorViewer.vue
index 7d04a4b3..3a9fa05d 100644
--- a/src/components/lab/editor/error-viewer/LabEditorErrorViewer.vue
+++ b/src/components/lab/editor/error-viewer/LabEditorErrorViewer.vue
@@ -2,9 +2,10 @@
 import CodemirrorFull from '@/components/base/CodemirrorFull.vue'
 import { ErrorViewerProps } from '@/model/editor/error-viewer'
 import { computed } from 'vue'
-import { TabComponentProps, VoidTabRequestComponentData } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps, VoidTabRequestComponentData } from '@/model/editor/editor'
 
 const props = defineProps<TabComponentProps<ErrorViewerProps, VoidTabRequestComponentData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const title = computed(() => {
     return props.params.error.name
@@ -16,6 +17,8 @@ const detail = computed(() => {
     }
     return props.params.error.detail
 })
+
+emit('ready')
 </script>
 
 <template>
diff --git a/src/components/lab/editor/evitaql-console/LabEditorEvitaQLConsole.vue b/src/components/lab/editor/evitaql-console/LabEditorEvitaQLConsole.vue
index 352e28c6..7be04f19 100644
--- a/src/components/lab/editor/evitaql-console/LabEditorEvitaQLConsole.vue
+++ b/src/components/lab/editor/evitaql-console/LabEditorEvitaQLConsole.vue
@@ -14,12 +14,13 @@ import CodemirrorFull from '@/components/base/CodemirrorFull.vue'
 import { EvitaQLConsoleService, useEvitaQLConsoleService } from '@/services/editor/evitaql-console.service'
 import { EvitaQLConsoleData, EvitaQLConsoleParams } from '@/model/editor/evitaql-console'
 import { Toaster, useToaster } from '@/services/editor/toaster'
-import { TabComponentProps } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps } from '@/model/editor/editor'
 
 const evitaQLConsoleService: EvitaQLConsoleService = useEvitaQLConsoleService()
 const toaster: Toaster = useToaster()
 
 const props = defineProps<TabComponentProps<EvitaQLConsoleParams, EvitaQLConsoleData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const path = ref<string[]>([
     props.params.dataPointer.catalogName
@@ -43,6 +44,8 @@ async function executeQuery(): Promise<void> {
     }
 }
 
+emit('ready')
+
 if (props.params.executeOnOpen) {
     executeQuery()
 }
diff --git a/src/components/lab/editor/graphql-console/LabEditorGraphQLConsole.vue b/src/components/lab/editor/graphql-console/LabEditorGraphQLConsole.vue
index 0d7daa4a..c5aee77e 100644
--- a/src/components/lab/editor/graphql-console/LabEditorGraphQLConsole.vue
+++ b/src/components/lab/editor/graphql-console/LabEditorGraphQLConsole.vue
@@ -16,12 +16,13 @@ import { GraphQLSchema, printSchema } from 'graphql'
 import { GraphQLConsoleData, GraphQLConsoleParams, GraphQLInstanceType } from '@/model/editor/graphql-console'
 import CodemirrorFull from '@/components/base/CodemirrorFull.vue'
 import { Toaster, useToaster } from '@/services/editor/toaster'
-import { TabComponentProps } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps } from '@/model/editor/editor'
 
 const graphQLConsoleService: GraphQLConsoleService = useGraphQLConsoleService()
 const toaster: Toaster = useToaster()
 
 const props = defineProps<TabComponentProps<GraphQLConsoleParams, GraphQLConsoleData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const path = ref<string[]>([])
 if (props.params.instancePointer.instanceType !== GraphQLInstanceType.SYSTEM) {
@@ -53,6 +54,8 @@ onBeforeMount(() => {
             graphQLSchema.value = schema
             queryExtensions.push(graphql(schema))
             initialized.value = true
+            emit('ready')
+
             if (props.params.executeOnOpen) {
                 executeQuery()
             }
@@ -211,9 +214,6 @@ function initializeSchemaEditor(): void {
             </Splitpanes>
         </div>
     </div>
-    <div v-else>
-        Loading...
-    </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/components/lab/editor/schema-viewer/LabEditorSchemaViewer.vue b/src/components/lab/editor/schema-viewer/LabEditorSchemaViewer.vue
index 3b0a078e..ca175819 100644
--- a/src/components/lab/editor/schema-viewer/LabEditorSchemaViewer.vue
+++ b/src/components/lab/editor/schema-viewer/LabEditorSchemaViewer.vue
@@ -3,12 +3,13 @@ import { SchemaViewerProps } from '@/model/editor/schema-viewer'
 import { ref } from 'vue'
 import { SchemaViewerService, useSchemaViewerService } from '@/services/editor/schema-viewer.service'
 import { Toaster, useToaster } from '@/services/editor/toaster'
-import { TabComponentProps, VoidTabRequestComponentData } from '@/model/editor/editor'
+import { TabComponentEvents, TabComponentProps, VoidTabRequestComponentData } from '@/model/editor/editor'
 
 const schemaViewerService: SchemaViewerService = useSchemaViewerService()
 const toaster: Toaster = useToaster()
 
 const props = defineProps<TabComponentProps<SchemaViewerProps, VoidTabRequestComponentData>>()
+const emit = defineEmits<TabComponentEvents>()
 
 const schemaLoaded = ref<boolean>(false)
 const schema = ref<any>()
@@ -19,11 +20,15 @@ schemaViewerService.getSchema(props.params.dataPointer)
     .then(s => {
         schema.value = s
         schemaLoaded.value = true
+        emit('ready')
     })
 </script>
 
 <template>
-    <div class="schema-viewer">
+    <div
+        v-if="schemaLoaded"
+        class="schema-viewer"
+    >
         <VToolbar
             density="compact"
             elevation="2"
@@ -45,14 +50,10 @@ schemaViewerService.getSchema(props.params.dataPointer)
 
         <VSheet class="schema-viewer__body">
             <component
-                v-if="schemaLoaded"
                 :is="params.dataPointer.schemaPointer.component()"
                 :data-pointer="params.dataPointer"
                 :schema="schema"
             />
-            <span v-else>
-                Loading...
-            </span>
         </VSheet>
     </div>
 </template>
diff --git a/src/model/editor/editor.ts b/src/model/editor/editor.ts
index 2be07322..48fd0f70 100644
--- a/src/model/editor/editor.ts
+++ b/src/model/editor/editor.ts
@@ -79,3 +79,13 @@ export interface ExecutableTabRequest extends TabRequestComponentParams {
  * Represents injectable/storable data of a component that doesn't support any user data.
  */
 export interface VoidTabRequestComponentData extends TabRequestComponentData {}
+
+/**
+ * Represents basic events every tab component should emit.
+ */
+export interface TabComponentEvents {
+    /**
+     * Emitted when the tab component is ready to be used.
+     */
+    (e: 'ready'): void
+}