Update: Python Online板卡下在载入Python3内核时增加提示信息

boards/default_src/python_pyodide/language/en.js

@@ -1,5 +1,6 @@
 export const EnMsg = {
-    'PYTHON_PYODIDE_IMAGE': 'Image'
+    'PYTHON_PYODIDE_IMAGE': 'Image',
+    'PYTHON_PYODIDE_LOADING': 'Python3 kernel loading...'
 };
 
 export const EnCatgories = {};

boards/default_src/python_pyodide/language/zh-hans.js

@@ -1,5 +1,6 @@
 export const ZhHansMsg = {
-    'PYTHON_PYODIDE_IMAGE': '图像'
+    'PYTHON_PYODIDE_IMAGE': '图像',
+    'PYTHON_PYODIDE_LOADING': 'Python3内核载入中...'
 };
 
 export const ZhHansCatgories = {};

boards/default_src/python_pyodide/language/zh-hant.js

@@ -1,5 +1,6 @@
 export const ZhHantMsg = {
-    'PYTHON_PYODIDE_IMAGE': '影像'
+    'PYTHON_PYODIDE_IMAGE': '影像',
+    'PYTHON_PYODIDE_LOADING': 'Python3核心載入...'
 };
 
 export const ZhHantCatgories = {};

boards/default_src/python_pyodide/others/loader.js

@@ -1,3 +1,3 @@
 import NavExt from './nav-ext';
 
-NavExt.init();
+await NavExt.init();

boards/default_src/python_pyodide/others/python-shell.js

@@ -1,19 +1,38 @@
+import * as Blockly from 'blockly/core';
 import * as path from 'path';
-// import * as dayjs from 'dayjs';
+import $ from 'jquery';
 import {
     Workspace,
     Debug,
     Env,
-    Msg
+    Msg,
+    HTMLTemplate,
+    app
 } from 'mixly';
 import { KernelLoader } from '@basthon/kernel-loader';
 import StatusBarImage from './statusbar-image';
+import LOADER_TEMPLATE from '../templates/html/loader.html';
 
 class PythonShell {
     static {
+        HTMLTemplate.add(
+            'html/statusbar/loader.html',
+            new HTMLTemplate(LOADER_TEMPLATE)
+        );
+
         this.pythonShell = null;
+        this.kernelLoaded = false;
+        this.$loader = $(HTMLTemplate.get('html/statusbar/loader.html').render({
+            msg: {
+                loading: Blockly.Msg.PYTHON_PYODIDE_LOADING
+            }
+        }));
 
         this.init = async function () {
+            const footerBar = app.getFooterBar();
+            const $content = footerBar.getContent();
+            $content.after(this.$loader);
+
             StatusBarImage.init();
             const projectPath = path.relative(Env.indexDirPath, Env.boardDirPath);
             const loader = new KernelLoader({
@@ -34,6 +53,9 @@ class PythonShell {
             this.pyodide = window.pyodide;
             this.interruptBuffer = new Uint8Array(new ArrayBuffer(1));
             this.pyodide.setInterruptBuffer(this.interruptBuffer);
+            this.kernelLoaded = true;
+            this.$loader.remove();
+            this.$loader = null;
         }
 
         this.run = function () {
@@ -94,6 +116,7 @@ class PythonShell {
             }
         }
     ];
+
     constructor() {
         const mainWorkspace = Workspace.getMain();
         this.#statusBarsManager_ = mainWorkspace.getStatusBarsManager();
@@ -170,6 +193,9 @@ class PythonShell {
     }
 
     run(code) {
+        if (!PythonShell.kernelLoaded) {
+            return;
+        }
         this.stop()
             .then(() => {
                 if (code.indexOf('import turtle') !== -1) {
@@ -191,6 +217,9 @@ class PythonShell {
     }
 
     async stop() {
+        if (!PythonShell.kernelLoaded) {
+            return;
+        }
         if (this.#waittingForInput_) {
             this.#exitInput_();
         }

boards/default_src/python_pyodide/templates/html/loader.html

@@ -0,0 +1,24 @@
+<style>
+    div[m-id="{{d.mId}}"] {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        background-color: transparent !important;
+        font-size: 12px;
+        line-height: 12px;
+        color: #fff;
+        bottom: 0;
+        height: var(--footer-height);
+        width: 100%;
+    }
+
+    div[m-id="{{d.mId}}"] > p {
+        margin-left: 5px;
+    }
+</style>
+<div m-id="{{d.mId}}">
+    <div class="ui mini active inline slow loader"></div>
+    <p>{{d.msg.loading}}</p>
+</div>

boards/default_src/python_pyodide/templates/html/statusbar-image.html

@@ -14,6 +14,4 @@
         background-color: #1e1e1e;
     }
 </style>
-<div m-id="{{d.mId}}" class="page-item">
+<div m-id="{{d.mId}}" class="page-item"></div>
-
-</div>