Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
xlorne opened this issue Mar 22, 2024 · 8 comments

Comments

@xlorne
Copy link

xlorne commented Mar 22, 2024

Pre-flight checklist

  • I have read the contribution documentation for this project.
  • I agree to follow the code of conduct that this project uses.
  • 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

@Ayush9026

This comment was marked as spam.

@Akemi-Madoka
Copy link

in preload.js

function useLoading()

It's it.

@xlorne
Copy link
Author

xlorne commented Apr 17, 2024

@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.

@Akemi-Madoka
Copy link

@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)`

@erickzhao
Copy link
Member

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.

@xlorne
Copy link
Author

xlorne commented Apr 22, 2024

@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
Copy link
Author

xlorne commented Apr 22, 2024

@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.

@Haoingli
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants