enerby-dev/index.html at main · enerBydev/enerby-dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Preload Orbitron for loading screen -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap" rel="stylesheet">

    <!-- Critical CSS - Loading screen + FOUC prevention -->
    <style>
        /* CRITICAL: Hide app content until CSS loads - prevents FOUC */
        #main {
            visibility: hidden;
        }

        /* Loading Screen - isolated styles */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.3s ease-out;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        #loading-screen.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loading-brand {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: #00FFFF;
            text-shadow:
                0 0 10px #00FFFF,
                0 0 20px #00FFFF,
                0 0 30px #00FFFF;
            margin-bottom: 2rem;
            letter-spacing: 0.05em;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(0, 245, 212, 0.1);
            border-top-color: #00f5d4;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loading-text {
            margin-top: 1.5rem;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.875rem;
            letter-spacing: 0.1em;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <!-- Loading Screen (visible mientras WASM carga) -->
    <div id="loading-screen">
        <div class="loading-brand">enerby.dev</div>
        <div class="loading-spinner"></div>
        <div class="loading-text">LOADING...</div>
    </div>

    <!-- Dioxus monta aquí - HIDDEN by default to prevent FOUC -->
    <div id="main"></div>

    <script>
        // Wait for all stylesheets to be loaded and parsed
        function waitForStylesheets() {
            return new Promise((resolve) => {
                const checkStylesheets = () => {
                    const stylesheets = document.querySelectorAll('link[rel="stylesheet"]');
                    let allLoaded = true;

                    stylesheets.forEach(link => {
                        // Check if stylesheet is loaded (has sheet property)
                        if (!link.sheet) {
                            allLoaded = false;
                        }
                    });

                    if (allLoaded && stylesheets.length > 0) {
                        resolve();
                    } else {
                        // Check again in 50ms
                        setTimeout(checkStylesheets, 50);
                    }
                };

                checkStylesheets();

                // Fallback timeout (3s max wait)
                setTimeout(resolve, 3000);
            });
        }

        // Function to hide loading and show app with proper synchronization
        async function hideLoadingScreen() {
            const loadingScreen = document.getElementById('loading-screen');
            const main = document.getElementById('main');

            if (loadingScreen && !loadingScreen.classList.contains('hidden')) {
                // Wait for stylesheets to be ready
                await waitForStylesheets();

                // Double requestAnimationFrame for browser paint sync
                requestAnimationFrame(() => {
                    requestAnimationFrame(() => {
                        // Small delay to ensure CSS is fully applied
                        setTimeout(() => {
                            // Show main content FIRST
                            if (main) main.style.visibility = 'visible';
                            // THEN hide loading screen
                            loadingScreen.classList.add('hidden');
                        }, 150);
                    });
                });
            }
        }

        // MutationObserver to detect when Dioxus mounts content
        const observer = new MutationObserver(() => {
            const main = document.getElementById('main');
            if (main && main.children.length > 0) {
                observer.disconnect();
                hideLoadingScreen();
            }
        });
        observer.observe(document.getElementById('main'), { childList: true, subtree: true });

        // Fallback 10s
        setTimeout(() => {
            hideLoadingScreen();
        }, 10000);
    </script>
</body>

</html>