diff --git a/packages/mask/.webpack/config.ts b/packages/mask/.webpack/config.ts index 437274359cec..71512bbecd09 100644 --- a/packages/mask/.webpack/config.ts +++ b/packages/mask/.webpack/config.ts @@ -28,6 +28,8 @@ const __dirname = fileURLToPath(dirname(import.meta.url)) const require = createRequire(import.meta.url) const patchesDir = join(__dirname, '../../../patches') const templateContent = readFile(join(__dirname, './template.html'), 'utf8') +const popupTemplateContent = readFile(join(__dirname, './popups.html'), 'utf8') + export async function createConfiguration(_inputFlags: BuildFlags): Promise { const VERSION = JSON.parse(await readFile(new URL('../../../package.json', import.meta.url), 'utf-8')).version const flags = normalizeBuildFlags(_inputFlags) @@ -346,11 +348,11 @@ async function addHTMLEntry({ gun?: boolean perf: boolean }) { - let template = await templateContent + let template = await (options.filename === 'popups.html' ? popupTemplateContent : templateContent) if (gun) template = template.replace(``, '') if (perf) template = template.replace(``, '') return new HTMLPlugin({ - templateContent: template, + templateContent: options.filename === 'popups.html' ? popupTemplateContent : templateContent, inject: 'body', scriptLoading: 'defer', minify: false, diff --git a/packages/mask/.webpack/popups.html b/packages/mask/.webpack/popups.html new file mode 100644 index 000000000000..faecb0034d9e --- /dev/null +++ b/packages/mask/.webpack/popups.html @@ -0,0 +1,98 @@ + + + + Mask Network + + + + + + + + + + + + + + + + + +
+
+ + + + + + +

Loading

+
+
+ + diff --git a/packages/mask/src/extension/popups/UI.tsx b/packages/mask/src/extension/popups/UI.tsx index 3c85d06c1a48..6a2436869469 100644 --- a/packages/mask/src/extension/popups/UI.tsx +++ b/packages/mask/src/extension/popups/UI.tsx @@ -68,6 +68,12 @@ const personaInitialState = { const PopupRoutes = memo(function PopupRoutes() { const location = useLocation() const mainLocation = location.state?.mainLocation as Location | undefined + + useEffect(() => { + const spinner = document.getElementById('app-spinner') + if (spinner) spinner.remove() + }, []) + return (