Async load of extensions info

21cdfa1dfadff01c78e9424a65cff91d49f29694

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 5f2a73ac9fce25752d5dbec3b237cc96a7fdf5e6

public/scripts/extensions.js+27 -23 Viewed

 async function showExtensionsDetails() {
     let popupPromise;
     try {
 -        showLoader();
 +        const htmlDefault = $('<h3>Built-in Extensions:</h3>');
         letconst htmlDefaulthtmlExternal = $('<h3>Built-inInstalled Extensions:</h3>').addClass('opacity50p');
 -        let htmlExternal = '<h3>Installed Extensions:</h3>';
 +        const htmlLoading = $(`<h3 class="flex-container alignItemsCenter justifyCenter marginTop10 marginBot5">
+-
 +            <i class="fa-solid fa-spinner fa-spin"></i>
 -        const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order);
 +            <span>Loading third-party extensions... Please wait...</span>
 +        </h3>`);
++
 +        /** @type {Promise<any>[]} */
         const promises = [];
 +        const extensions = Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order);
         for (const extension of extensions) {
             promises.push(getExtensionData(extension));
+        }
 -        const settledPromises = await Promise.allSettled(promises);
 +        promises.forEach(promise => {
 +            promise.then(value => {
 +                const { isExternal, extensionHtml } = value;
 +                const container = isExternal ? htmlExternal : htmlDefault;
 +                container.append(extensionHtml);
 +            });
 +        });
         settledPromisesPromise.forEachallSettled(promisepromises).then(() => {
 -            if (promise.status === 'fulfilled') {
 +            htmlLoading.remove();
 -                const { isExternal, extensionHtml } = promise.value;
 +            htmlExternal.removeClass('opacity50p');
 -                if (isExternal) {
 -                    htmlExternal += extensionHtml;
 -                } else {
 -                    htmlDefault += extensionHtml;
 -                }
 -            }
         });
         const html = `$('<div></div>')
 -            ${getModuleInformation()}
 +            .addClass('extensions_info')
 -            ${htmlDefault}
 +            .append(getModuleInformation())
 -            ${htmlExternal}
 +            .append(htmlDefault)
 -        `;
 +            .append(htmlLoading)
 +            .append(htmlExternal);
++
         /** @type {import('./popup.js').CustomPopupButton} */
         const updateAllButton = {
             text: 'Update all',

             await oldPopup.complete(POPUP_RESULT.CANCELLED);
+        }
         const popup = new Popup(`<div class="extensions_info">${html}</div>`, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, customButtons: [updateAllButton], allowVerticalScrolling: true });
         popupPromise = popup.show();
     } catch (error) {
         toastr.error('Error loading extensions. See browser console for details.');
         console.error(error);
 -    } finally {
 -        hideLoader();
+    }
     if (popupPromise) {
         await popupPromise;