forge icon indicating copy to clipboard operation
forge copied to clipboard

When making a folder using Electron-forge, after installing the exe file, a green boot page will pop up. How to close it?

Open xlorne opened this issue 11 months ago • 8 comments

Pre-flight checklist

  • [X] I have read the contribution documentation for this project.
  • [X] I agree to follow the code of conduct that this project uses.
  • [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

7.3.0

Electron version

29.1.4

Operating system

windows 11

Last known working Electron Forge version

No response

Expected behavior

How to remove this boot page? And I found that after closing the boot page, the program will exit and then reopen.

Actual behavior

image

Steps to reproduce

Package through make and then install the exe file.

Additional information

No response

xlorne avatar Mar 22 '24 08:03 xlorne

/assign @Ayush9026 i will solve this.

Ayush9026 avatar Mar 22 '24 18:03 Ayush9026

in preload.js

function useLoading()

It's it.

Akemi-Madoka avatar Apr 15 '24 06:04 Akemi-Madoka

@Akemi-Madoka Thanks for your reply, but can you provide more details? I didn't find anything about the useLoading function in the forge and electron documents.

xlorne avatar Apr 17 '24 02:04 xlorne

@xlorne

NoNoNoNo, This from forge template, You should open your project open preload.ts, or preload.js There is a function, return HTML strings, Default name is 'useLoading'。 `/**

  • https://tobiasahlin.com/spinkit

  • https://connoratherton.com/loaders

  • https://projects.lukehaas.me/css-loaders

  • https://matejkustec.github.io/SpinThatShit */ function useLoading() { const className = loaders-css__square-spin const styleContent = @keyframes square-spin { 25% { transform: perspective(100px) rotateX(180deg) rotateY(0); } 50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { transform: perspective(100px) rotateX(0) rotateY(180deg); } 100% { transform: perspective(100px) rotateX(0) rotateY(0); } } .${className} > div { animation-fill-mode: both; width: 50px; height: 50px; background: #fff; animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } .app-loading-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background: #282c34; z-index: 9; } const oStyle = document.createElement('style') const oDiv = document.createElement('div')

    oStyle.id = 'app-loading-style' oStyle.innerHTML = styleContent oDiv.className = 'app-loading-wrap' oDiv.innerHTML = <div class="${className}"><div></div></div>

    return { appendLoading() { safeDOM.append(document.head, oStyle) safeDOM.append(document.body, oDiv) }, removeLoading() { safeDOM.remove(document.head, oStyle) safeDOM.remove(document.body, oDiv) }, } }

// ----------------------------------------------------------------------

const { appendLoading, removeLoading } = useLoading() domReady().then(appendLoading)

window.onmessage = ev => { ev.data.payload === 'removeLoading' && removeLoading() }

setTimeout(removeLoading, 4999)`

Akemi-Madoka avatar Apr 17 '24 12:04 Akemi-Madoka

You can at least swap out this loading gif in the installer via the https://js.electronforge.io/interfaces/_electron_forge_maker_squirrel.InternalOptions.SquirrelWindowsOptions.html#loadingGif option. I don't know if there's an additional API option to remove it at the moment.

erickzhao avatar Apr 18 '24 22:04 erickzhao

@erickzhao Thank you for your reply. Yes, I saw the documentation for the loadingGif option, but as you said, this option is required and cannot be deleted.

xlorne avatar Apr 22 '24 01:04 xlorne

@Akemi-Madoka Thank you for your help, but when I added the useLoading function, nothing changed and it still appeared. I tried to add log in the useLoading function and found that it was not executed.

xlorne avatar Apr 22 '24 01:04 xlorne

I also encountered this problem and this topic helped me solve many problems. Thanks But I still have a question, The template generated by the official command we used, npm init electron-app@latest my-new-app -- --template=vite

Nothing is added. Terminal execution npm run make Packaged Windows installer, click Execute, why does it open my application directly instead of executing the installer?

Have you encountered this problem?

Haoingli avatar May 13 '24 05:05 Haoingli