defer binder connection

frontend/scss/variables/settings.scss

@@ -19,6 +19,6 @@ $spacing-unit-small: 12px;
 $spacing-unit: 24px;
 
 // Grid parameters.
-$column-size-large: 4rem;
+$column-size-large: 6rem;
 $column-size-medium: 5rem;
-$column-size-small: 5rem;
+$column-size-small: 4rem;

frontend/vue/components/CodeExercise/CodeExercise.vue

@@ -13,6 +13,7 @@
       <ExerciseActionsBar
         class="code-exercise__editor-block__actions-bar"
         :is-running="isKernelBusy"
+        :is-loading="isKernelLoading"
         :is-api-token-needed="isApiTokenNeeded"
         :run-enabled="isKernelReady"
         :grade-enabled="isKernelReady && isGradingExercise"
@@ -35,6 +36,7 @@
       @running="kernelRunning"
       @finished="kernelFinished"
       @kernelReady="kernelReady"
+      @kernelLoading="kernelLoading"
       @correctAnswer="gradeSuccess"
     />
     <div
@@ -111,6 +113,7 @@ export default defineComponent({
       initialCode: '',
       isKernelBusy: false,
       isKernelReady: false,
+      isKernelLoading: false,
       hideInitialOutput: false,
       isApiTokenNeeded: this.usesHardware,
       id: 0
@@ -183,12 +186,17 @@ export default defineComponent({
     kernelRunning () {
       this.isKernelBusy = true
       this.hideInitialOutput = true
+      this.isKernelLoading = false
     },
     kernelFinished () {
       this.isKernelBusy = false
     },
     kernelReady () {
       this.isKernelReady = true
+      this.isKernelLoading = false
+    },
+    kernelLoading () {
+      this.isKernelLoading = true
     }
   }
 })

frontend/vue/components/CodeExercise/CodeOutput.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="outputDiv" class="code-output">
     <div>
-      <div v-if="!kernel && !error" class="code-output__state-info">
+      <div v-if="kernelLoading && !error" class="code-output__state-info">
         <bx-loading class="code-output__state-info__icon" assistive-text="Connecting to the server" type="small" />
         {{ $translate('Connecting to the server') }}
       </div>
@@ -45,6 +45,7 @@ export default defineComponent({
   },
   data () {
     return {
+      kernelLoading: false,
       kernelPromise: undefined as Promise<IKernelConnection> | undefined,
       kernel: undefined as IKernelConnection | undefined,
       outputArea: undefined as OutputArea | undefined,
@@ -53,19 +54,6 @@ export default defineComponent({
     }
   },
   mounted () {
-    this.$emit('loadingKernel')
-    const outputDivRef = (this.$refs.outputDiv as HTMLDivElement)
-
-    this.kernelPromise = requestBinderKernel()
-
-    this.kernelPromise.then((kernel: IKernelConnection) => {
-      this.kernel = kernel
-      this.$emit('kernelReady')
-      this.outputArea = createOutputArea(outputDivRef)
-    }, (error: Error) => {
-      this.error = error.message
-    })
-
     this.apiTokenPromise = getQiskitUser().then(user => user?.apiToken)
   },
   methods: {
@@ -103,9 +91,9 @@ export default defineComponent({
     },
     _executeCode (code: string) {
       this.error = ''
-      this.outputArea!.setHidden(true)
-      this.kernelPromise!.then((kernel: IKernelConnection) => {
+      this._initKernel()!.then((kernel: IKernelConnection) => {
         this.$emit('running')
+        this.outputArea!.setHidden(true)
         try {
           const requestFuture = kernel.requestExecute({ code })
           this.setOutputFuture(requestFuture)
@@ -128,6 +116,26 @@ export default defineComponent({
         }
       })
     },
+    _initKernel (): Promise<IKernelConnection> {
+      if (this.kernelPromise) {
+        return this.kernelPromise
+      }
+
+      this.$emit('kernelLoading')
+      this.kernelLoading = true
+      const outputDivRef = (this.$refs.outputDiv as HTMLDivElement)
+
+      this.kernelPromise = requestBinderKernel()
+
+      return this.kernelPromise.then((kernel: IKernelConnection) => {
+        this.kernelLoading = false
+        this.$emit('kernelReady')
+        this.outputArea = createOutputArea(outputDivRef)
+        return kernel
+      }, (error: Error) => {
+        this.error = error.message
+      }) as Promise<IKernelConnection>
+    },
     setOutputFuture (future : IOutputShellFuture) {
       this.outputArea!.future = future
     },

frontend/vue/components/CodeExercise/ExerciseActionsBar.vue

@@ -1,5 +1,14 @@
 <template>
   <div class="exercise-actions-bar">
+    <button
+      v-if="!runEnabled && !isRunning && !isApiTokenNeeded"
+      class="exercise-actions-bar__button exercise-actions-bar__button_kernel"
+      @click="run(isApiTokenNeeded)"
+      :class="{'exercise-actions-bar__button exercise-actions-bar__button_disabled': isLoading}"
+      :disabled="isLoading"
+    >
+      {{ $translate('Start kernel and run') }}
+    </button>
     <button
       v-if="runEnabled && !isRunning && !isApiTokenNeeded"
       class="exercise-actions-bar__button exercise-actions-bar__button_run"
@@ -32,6 +41,11 @@ import 'carbon-web-components/es/components/loading/loading'
 export default defineComponent({
   name: 'ExerciseActionsBar',
   props: {
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     isRunning: {
       type: Boolean,
       required: false,
@@ -91,7 +105,7 @@ export default defineComponent({
 
   &__button {
     padding: $spacing-03;
-    width: $column-size-large;
+    width: $column-size-small;
     max-width: 100%;
 
     background-size: 200% 100%;
@@ -113,9 +127,14 @@ export default defineComponent({
       cursor: not-allowed;
     }
 
-    &_run {
+    &_run,
+    &_kernel {
       @include bicolor-background($button-background-color-quaternary-dark, $button-background-color-quaternary);
     }
+
+    &_kernel {
+      width: 2 * $column-size-medium;
+    }
   }
 
   &__indicator {

frontend/vue/components/UtilityPanel/Scratchpad.vue

@@ -20,6 +20,7 @@
         <ExerciseActionsBar
           class="scratchpad__editor-block__actions-bar"
           :is-running="isKernelBusy"
+          :is-loading="isKernelLoading"
           :run-enabled="isKernelReady"
           :grade-enabled="isKernelReady && isGradingExercise"
           :is-api-token-needed="isApiTokenNeeded"
@@ -41,6 +42,7 @@
         @running="kernelRunning"
         @finished="kernelFinished"
         @kernelReady="kernelReady"
+        @kernelLoading="kernelLoading"
       />
     </div>
   </div>
@@ -75,6 +77,7 @@ type scratchpadCopyRequestEvent = Event & { detail: { code: string } }
 })
 export default class Scratchpad extends Vue {
   code = INITIAL_CODE
+  isKernelLoading = false
   isKernelBusy = false
   isKernelReady = false
   isGradingExercise = false
@@ -120,6 +123,7 @@ export default class Scratchpad extends Vue {
 
   kernelRunning () {
     this.isKernelBusy = true
+    this.isKernelLoading = true
   }
 
   kernelFinished () {
@@ -128,6 +132,11 @@ export default class Scratchpad extends Vue {
 
   kernelReady () {
     this.isKernelReady = true
+    this.isKernelLoading = true
+  }
+
+  kernelLoading () {
+    this.isKernelLoading = true
   }
 }
 </script>

frontend/vue/components/common/AppCta.vue

@@ -84,7 +84,7 @@ export default class AppCta extends Vue.with(Props) {
   align-items: center;
 
   padding: $spacing-05;
-  width: 4 * $column-size-large;
+  width: 4 * $column-size-small;
   max-width: 100%;
 
   @include mq($from: medium, $until: large) {