mirror of
https://github.com/spacebarchat/client.git
synced 2024-11-25 03:32:54 +01:00
implement splash screen
This commit is contained in:
Puyodead1
Puyodead1
parent
2f44df727b
commit
74d1e34449
@ -22,6 +22,7 @@
|
||||
"@mdi/react": "^1.6.1",
|
||||
"@mui/material": "^5.13.0",
|
||||
"@spacebarchat/spacebar-api-types": "0.37.49",
|
||||
"@tauri-apps/api": "^1.4.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
|
||||
@ -35,6 +35,9 @@ dependencies:
|
||||
'@spacebarchat/spacebar-api-types':
|
||||
specifier: 0.37.49
|
||||
version: 0.37.49
|
||||
'@tauri-apps/api':
|
||||
specifier: ^1.4.0
|
||||
version: 1.4.0
|
||||
'@testing-library/jest-dom':
|
||||
specifier: ^5.16.5
|
||||
version: 5.16.5
|
||||
@ -2915,6 +2918,11 @@ packages:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
/@tauri-apps/api@1.4.0:
|
||||
resolution: {integrity: sha512-Jd6HPoTM1PZSFIzq7FB8VmMu3qSSyo/3lSwLpoapW+lQ41CL5Dow2KryLg+gyazA/58DRWI9vu/XpEeHK4uMdw==}
|
||||
engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}
|
||||
dev: false
|
||||
|
||||
/@tauri-apps/cli-darwin-arm64@1.4.0:
|
||||
resolution: {integrity: sha512-nA/ml0SfUt6/CYLVbHmT500Y+ijqsuv5+s9EBnVXYSLVg9kbPUZJJHluEYK+xKuOj6xzyuT/+rZFMRapmJD3jQ==}
|
||||
engines: {node: '>= 10'}
|
||||
|
||||
80
public/splashscreen.css
Normal file
80
public/splashscreen.css
Normal file
@ -0,0 +1,80 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
background: url(Spacebar.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.loader-wrapper {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.lds-ellipsis {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.lds-ellipsis div {
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
||||
}
|
||||
.lds-ellipsis div:nth-child(1) {
|
||||
left: 8px;
|
||||
animation: lds-ellipsis1 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(2) {
|
||||
left: 8px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(3) {
|
||||
left: 32px;
|
||||
animation: lds-ellipsis2 0.6s infinite;
|
||||
}
|
||||
.lds-ellipsis div:nth-child(4) {
|
||||
left: 56px;
|
||||
animation: lds-ellipsis3 0.6s infinite;
|
||||
}
|
||||
@keyframes lds-ellipsis1 {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis3 {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
@keyframes lds-ellipsis2 {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(24px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
19
public/splashscreen.html
Normal file
19
public/splashscreen.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="splashscreen.css">
|
||||
<title>Splashscreen</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="loader-wrapper">
|
||||
<div class="lds-ellipsis">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,8 +1,21 @@
|
||||
// Prevents additional console window on Windows in release, DO NOT REMOVE!!
|
||||
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
|
||||
|
||||
use tauri::Manager;
|
||||
|
||||
#[tauri::command]
|
||||
async fn close_splashscreen(window: tauri::Window) {
|
||||
// Close splashscreen
|
||||
if let Some(splashscreen) = window.get_window("splashscreen") {
|
||||
splashscreen.close().unwrap();
|
||||
}
|
||||
// Show main window
|
||||
window.get_window("main").unwrap().show().unwrap();
|
||||
}
|
||||
|
||||
fn main() {
|
||||
tauri::Builder::default()
|
||||
.invoke_handler(tauri::generate_handler![close_splashscreen])
|
||||
.run(tauri::generate_context!())
|
||||
.expect("error while running tauri application");
|
||||
}
|
||||
|
||||
@ -56,11 +56,20 @@
|
||||
"windows": [
|
||||
{
|
||||
"fullscreen": false,
|
||||
"height": 600,
|
||||
"resizable": true,
|
||||
"title": "Spacebar",
|
||||
"width": 800,
|
||||
"maximized": true
|
||||
"maximized": true,
|
||||
"visible": false,
|
||||
"label": "main"
|
||||
},
|
||||
{
|
||||
"width": 400,
|
||||
"height": 200,
|
||||
"decorations": false,
|
||||
"url": "splashscreen.html",
|
||||
"label": "splashscreen",
|
||||
"resizable": false,
|
||||
"center": true
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import LoginPage from "./pages/LoginPage";
|
||||
import NotFoundPage from "./pages/NotFound";
|
||||
import RegistrationPage from "./pages/RegistrationPage";
|
||||
|
||||
import { invoke } from "@tauri-apps/api";
|
||||
import { reaction } from "mobx";
|
||||
import Loader from "./components/Loader";
|
||||
import OfflineBanner from "./components/banners/OfflineBanner";
|
||||
@ -54,6 +55,8 @@ function App() {
|
||||
|
||||
logger.debug("Loading complete");
|
||||
app.setAppLoading(false);
|
||||
// @ts-expect-error check if tauri api is deined
|
||||
if (window.__TAURI__) invoke("close_splashscreen");
|
||||
|
||||
return dispose;
|
||||
}, []);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user