Loading animation is now based on the current context (global or application context)

d.ts/antos.d.ts

@@ -2255,6 +2255,20 @@ declare namespace OS {
              * @memberof BaseApplication
              */
             appmenu: GUI.tag.MenuTag;
+            /**
+             * Loading animation check timeout
+             *
+             * @memberof BaseApplication
+             */
+            private _loading_toh;
+            /**
+         * Store pending loading task
+         *
+         * @private
+         * @type {number[]}
+         * @memberof BaseApplication
+         */
+            private _pending_task;
             /**
              *Creates an instance of BaseApplication.
              * @param {string} name application name
@@ -2446,6 +2460,14 @@ declare namespace OS {
              * @memberof BaseApplication
              */
             protected cleanup(e: BaseEvent): void;
+            /**
+             * Check if the loading tasks ended,
+             * if it the case, stop the animation
+             *
+             * @private
+             * @memberof BaseApplication
+             */
+            private animation_check;
         }
     }
 }
@@ -10329,6 +10351,10 @@ declare namespace OS {
         /**
          * All running processes is stored in this variables
          */
+        /**
+         * Current active process ID
+         */
+        var pidactive: number;
         var processes: GenericObject<BaseModel[]>;
         /**
          * Create a new process of application or service
@@ -10365,5 +10391,11 @@ declare namespace OS {
          * @returns {void}
          */
         function killAll(app: string, force: boolean): void;
+        /**
+         * Get the current active application
+         *  @export
+         * @returns {BaseModel}
+         */
+        function getActiveApp(): BaseModel;
     }
 }

src/core/BaseApplication.ts

@@ -70,6 +70,21 @@ namespace OS {
              */
             appmenu: GUI.tag.MenuTag;
 
+            /**
+             * Loading animation check timeout
+             *
+             * @memberof BaseApplication
+             */
+            private _loading_toh: any;
+                /**
+             * Store pending loading task
+             *
+             * @private
+             * @type {number[]}
+             * @memberof BaseApplication
+             */
+            private _pending_task: number[];
+
             /**
              *Creates an instance of BaseApplication.
              * @param {string} name application name
@@ -83,6 +98,8 @@ namespace OS {
                 }
                 this.setting = setting.applications[this.name];
                 this.keycomb = {};
+                this._loading_toh = undefined;
+                this._pending_task = [];
             }
 
             /**
@@ -104,6 +121,7 @@ namespace OS {
                     this.sysdock.selectedApp = this;
                     this.appmenu.pid = this.pid;
                     this.appmenu.items = this.baseMenu() || [];
+                    OS.PM.pidactive = this.pid;
                     this.appmenu.onmenuselect = (
                         d: GUI.tag.MenuEventData
                     ): void => {
@@ -136,6 +154,26 @@ namespace OS {
                         this.applySetting(m.message as string);
                     }
                 });
+                this.subscribe("loading", (o: API.AnnouncementDataType<number>) => {
+                    if(o.u_data != this.pid)
+                    {
+                        return;
+                    }
+                    this._pending_task.push(o.id);
+                    this.trigger("loading", undefined);
+                });
+    
+                this.subscribe("loaded", (o: API.AnnouncementDataType<number>) => {
+                    const i = this._pending_task.indexOf(o.id);
+                    if (i >= 0) {
+                        this._pending_task.splice(i, 1);
+                    }
+                    if (this._pending_task.length === 0) {
+                        // set time out
+                        if(!this._loading_toh)
+                            this._loading_toh = setTimeout(() => this.animation_check(),1000);
+                    }
+                });
                 this.updateLocale(this.systemsetting.system.locale);
                 return this.loadScheme();
             }
@@ -446,6 +484,23 @@ namespace OS {
              * @memberof BaseApplication
              */
             protected cleanup(e: BaseEvent): void {}
+
+            /**
+             * Check if the loading tasks ended,
+             * if it the case, stop the animation
+             *
+             * @private
+             * @memberof BaseApplication
+             */
+            private animation_check(): void {
+                if(this._pending_task.length === 0)
+                {
+                    this.trigger("loaded", undefined);
+                }
+                if(this._loading_toh)
+                    clearTimeout(this._loading_toh);
+                this._loading_toh = undefined;
+            }
         }
 
         BaseApplication.type = ModelType.Application;

src/core/core.ts

@@ -1275,11 +1275,11 @@ namespace OS {
          * @param {string} p message string
          */
         export function loading(q: number, p: string): void {
-            const data:API.AnnouncementDataType<boolean> = {} as API.AnnouncementDataType<boolean>;
+            const data:API.AnnouncementDataType<number> = {} as API.AnnouncementDataType<number>;
             data.id = q;
             data.message = p;
-            data.name = "OS";
+            data.name = p;
-            data.u_data = true;
+            data.u_data = PM.pidactive;
             announcer.trigger("loading", data);
         }
 

src/core/gui.ts

@@ -533,7 +533,9 @@ namespace OS {
          */
         export function launch(app: string, args: AppArgumentsType[]): Promise<OS.PM.ProcessType> {
             return new Promise(async (resolve, reject) => {
+                const pidactive = PM.pidactive;
                 try {
+                    PM.pidactive = 0;
                     if (!application[app]) {
                         // first load it
                         await loadApp(app);
@@ -565,6 +567,7 @@ namespace OS {
                         __("Unable to launch: {0}", app),
                         e
                     );
+                    PM.pidactive = pidactive;
                     return reject(__e(e));
                 }
 

src/core/pm.ts

@@ -24,6 +24,10 @@ namespace OS {
         /**
          * All running processes is stored in this variables
          */
+        /**
+         * Current active process ID
+         */
+        export var pidactive: number = 0;
         export var processes: GenericObject<BaseModel[]> = {};
         /**
          * Create a new process of application or service
@@ -159,5 +163,19 @@ namespace OS {
                 p.quit(force);
             }
         }
+
+        /**
+         * Get the current active application
+         *  @export
+         * @returns {BaseModel}
+         */
+        export function getActiveApp():BaseModel
+        {
+            if(PM.pidactive === 0)
+            {
+                return undefined;
+            }
+            return PM.appByPid(PM.pidactive);
+        }
     }
 }

src/core/tags/AppDockTag.ts

@@ -162,6 +162,7 @@ namespace OS {
                     }
                     this._selectedItem = el;
                     if (!el) {
+                        PM.pidactive = 0;
                         return;
                     }
                     $(el.domel).addClass("selected");

src/core/tags/SystemPanelTag.ts

@@ -539,14 +539,18 @@ namespace OS {
                     announcer.observable.on("app-pinned", (_) => {
                         this.RefreshPinnedApp();
                     });
-                    announcer.observable.on("loading", (o: API.AnnouncementDataType<boolean>) => {
+                    announcer.observable.on("loading", (o: API.AnnouncementDataType<number>) => {
+                        if(o.u_data != 0)
+                        {
+                            return;
+                        }
                         this._pending_task.push(o.id);
                         if(!$(this.refs.panel).hasClass("loading"))
                             $(this.refs.panel).addClass("loading");
                         $(GUI.workspace).css("cursor", "wait");
                     });
     
-                    announcer.observable.on("loaded", (o: API.AnnouncementDataType<boolean>) => {
+                    announcer.observable.on("loaded", (o: API.AnnouncementDataType<number>) => {
                         const i = this._pending_task.indexOf(o.id);
                         if (i >= 0) {
                             this._pending_task.splice(i, 1);

src/core/tags/WindowTag.ts

@@ -331,6 +331,15 @@ namespace OS {
                             });
                         }
                     });
+                    this.observable.on("loaded", ()=>{
+                        $(this.refs.panel).removeClass("loading");
+                        $(this).css("cursor", "auto");
+                    });
+                    this.observable.on("loading", ()=>{
+                        if(!$(this.refs.panel).hasClass("loading"))
+                            $(this.refs.panel).addClass("loading");
+                        $(this).css("cursor", "wait");
+                    });
                     this.enable_dragging();
                     this.enable_resize();
                     this.setsize({
@@ -524,6 +533,7 @@ namespace OS {
                             children: [
                                 {
                                     el: "ul",
+                                    ref: 'panel',
                                     class: "afx-window-top",
                                     children: [
                                         {

src/themes/system/afx-app-window.css

@@ -15,6 +15,21 @@ afx-app-window ul.afx-window-top{
     width: 100%;
     padding:0;
 }
+
+afx-app-window ul.loading::before{
+    background-color: orangered;
+    content: "";
+    position: absolute;
+    height: 2px;
+    width: 0%;
+}
+
+afx-app-window ul.loading::before {
+    right: 0;
+    top:0;
+    animation: sys-loading 1s linear infinite;
+}
+
 afx-app-window ul.afx-window-top li{
     list-style: none;
 }

src/themes/system/afx-sys-panel.css

@@ -52,7 +52,7 @@ afx-sys-panel > div.loading::before {
     100% {
         right: auto;
         left: 100%;
-        width: 12.5%;
+        width: 0%;
     }
 }