Add loading indicator

This commit is contained in:
Josh Holtrop 2026-04-01 13:13:15 -04:00
parent 244edf90ac
commit 1eb58f87d2
2 changed files with 16 additions and 1 deletions

View File

@ -129,6 +129,20 @@
.logout-btn:hover { .logout-btn:hover {
background: #2a3040; background: #2a3040;
} }
.spinner {
width: 24px;
height: 24px;
margin: 1rem auto;
border: 3px solid #1e2433;
border-top-color: #4ade80;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style> </style>
</head> </head>
<body> <body>
@ -145,7 +159,7 @@
</header> </header>
<% if authenticated %> <% if authenticated %>
<div id="content"></div> <div id="content"><div class="spinner"></div></div>
<script> <script>
fetch("?content", { credentials: "same-origin" }) fetch("?content", { credentials: "same-origin" })
.then(function(response) { .then(function(response) {

View File

@ -81,6 +81,7 @@ end
if cgi.params.key?("content") if cgi.params.key?("content")
if authenticated if authenticated
sleep 5
cgi.out("type" => "text/html", "charset" => "UTF-8") do cgi.out("type" => "text/html", "charset" => "UTF-8") do
"<p>Content placeholder</p>" "<p>Content placeholder</p>"
end end