sBubshait/wesal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: main loading page while Flutter JS loads

Browse Source
This commit is contained in:
sBubshait 2025-08-03 10:54:36 +03:00
parent d6a0e78031
commit 121395481e
2 changed files with 219 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/lib/main.dart
View File

@ -608,7 +608,8 @@ class _SignInPageState extends State<SignInPage> {
), ),
child: _isLoading child: _isLoading
? CircularProgressIndicator( ? CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>( valueColor:
AlwaysStoppedAnimation<Color>(
Colors.white, Colors.white,
), ),
) )

53
frontend/web/index.html
View File

@ -45,13 +45,66 @@
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0;
padding: 0;
}
/* Loading screen styles */
#loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #32B0A5 0%, #4600B9 50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Loading spinner */
.spinner {
width: 80px;
height: 80px;
border: 6px solid rgba(255, 255, 255, 0.3);
border-top: 6px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Hide loading screen when Flutter loads */
.flutter-loaded #loading {
display: none;
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Loading screen -->
<div id="loading">
<div class="spinner"></div>
</div>
<script src="flutter_bootstrap.js" async></script> <script src="flutter_bootstrap.js" async></script>
<!-- Hide loading screen when Flutter loads -->
<script>
window.addEventListener('flutter-first-frame', function () {
document.body.classList.add('flutter-loaded');
});
// Fallback: hide after 10 seconds if Flutter doesn't load
setTimeout(function() {
document.body.classList.add('flutter-loaded');
}, 10000);
</script>
<!-- Firebase Messaging Service Worker --> <!-- Firebase Messaging Service Worker -->
<script> <script>
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {