Skip to content

Commit 6d74431

Browse files
cryptomalgocryptomalgo
authored
Cache data to speed up loading (#43)
* Cache data to speed up loading * Move queries to hooks/queries * Moove progress from modal to top of the page * Update deps * Add proposed prefix
1 parent d45e86d commit 6d74431

64 files changed

Lines changed: 3925 additions & 395 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/copilot-instructions.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@
99
- Break down complex files into separate files with specific functions to improve readability and maintainability
1010
- Keep functions small and single-purpose
1111
- Extract reusable logic into separate utilities or hooks
12+
- Do not add comment to everything, explain it in the Chat but only add comments in the code where necessary for clarity (complex logic, important notes)
13+
- Do not add JSDoc comments unless specifically requested (no @param or @returns etc, we use TypeScript)
14+
- When you edit test files, run tests using VSCode test explorer instead of the terminal.
15+
- Do not create unused function that might be useful later, only implement what is needed for the current task
16+
- When you spend some time understanding the code, add a brief summary on this file (./.github/copilot-instructions.md) on the most suitable section
1217

1318
### Development Practices
1419

‎index.html‎

Lines changed: 84 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -28,42 +28,95 @@
2828
content="https://algonoderewards.com/preview.png"
2929
/>
3030
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
31+
<style>
32+
/* Loading spinner styles */
33+
#app-loading {
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
min-height: 100vh;
38+
background-color: rgb(249 250 251);
39+
}
40+
#app-loading .spinner {
41+
width: 48px;
42+
height: 48px;
43+
border: 4px solid rgb(229 231 235);
44+
border-top-color: rgb(99 102 241);
45+
border-radius: 50%;
46+
animation: spin 0.8s linear infinite;
47+
}
48+
@keyframes spin {
49+
to {
50+
transform: rotate(360deg);
51+
}
52+
}
53+
/* Hide SEO content visually but keep for crawlers */
54+
.seo-only {
55+
position: absolute;
56+
width: 1px;
57+
height: 1px;
58+
padding: 0;
59+
margin: -1px;
60+
overflow: hidden;
61+
clip: rect(0, 0, 0, 0);
62+
white-space: nowrap;
63+
border-width: 0;
64+
}
65+
/* Dark mode support */
66+
@media (prefers-color-scheme: dark) {
67+
#app-loading {
68+
background-color: rgb(17 24 39);
69+
}
70+
#app-loading .spinner {
71+
border-color: rgb(55 65 81);
72+
border-top-color: rgb(129 140 248);
73+
}
74+
}
75+
</style>
3176
</head>
3277
<body class="flex min-h-screen flex-col" id="root">
33-
<header
34-
class="mx-auto w-full max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8"
35-
>
36-
<div class="relative mr-auto flex h-16 justify-between">
37-
<div class="relative z-10 flex px-2 lg:px-0">
38-
<div class="flex items-center">
39-
<a href="/" class="flex items-center gap-2">
40-
<img
41-
alt="Algo Node Rewards"
42-
height="32"
43-
src="/logo.png"
44-
class="h-8 w-auto"
45-
/>
46-
<span class="text-lg">Algo Node Rewards</span>
47-
</a>
78+
<!-- Loading spinner shown immediately -->
79+
<div id="app-loading">
80+
<div class="spinner"></div>
81+
</div>
82+
83+
<!-- SEO content - hidden from users but visible to crawlers -->
84+
<div class="seo-only">
85+
<header
86+
class="mx-auto w-full max-w-7xl px-2 sm:px-4 lg:divide-y lg:divide-gray-200 lg:px-8"
87+
>
88+
<div class="relative mr-auto flex h-16 justify-between">
89+
<div class="relative z-10 flex px-2 lg:px-0">
90+
<div class="flex items-center">
91+
<a href="/" class="flex items-center gap-2">
92+
<img
93+
alt="Algo Node Rewards"
94+
height="32"
95+
src="/logo.png"
96+
class="h-8 w-auto"
97+
/>
98+
<span class="text-lg">Algo Node Rewards</span>
99+
</a>
100+
</div>
48101
</div>
49102
</div>
50-
</div>
51-
</header>
52-
<main class="flex-grow">
53-
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
54-
<div class="relative p-6 text-center">
55-
<h1
56-
class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
57-
>
58-
Cool stats for your Algorand staking rewards
59-
</h1>
60-
<p>
61-
Get your total node rewards and identify peak performance periods
62-
with our detailed rewards heatmap
63-
</p>
103+
</header>
104+
<main class="grow">
105+
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
106+
<div class="relative p-6 text-center">
107+
<h1
108+
class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
109+
>
110+
Cool stats for your Algorand staking rewards
111+
</h1>
112+
<p>
113+
Get your total node rewards and identify peak performance periods
114+
with our detailed rewards heatmap
115+
</p>
116+
</div>
64117
</div>
65-
</div>
66-
</main>
118+
</main>
119+
</div>
67120
<script type="module" src="/src/main.tsx"></script>
68121
</body>
69122
</html>

0 commit comments

Comments
 (0)