Skip to content

Commit c4383cb

Browse files
MohamadObeid9MohamadObeid9
committed
add skeleton preview and aficon.ico
1 parent 459b0f6 commit c4383cb

13 files changed

Lines changed: 255 additions & 44 deletions

‎app.js‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,55 @@
11
async function loadHtml(url) {
2-
const res = await fetch(url);
3-
if (!res.ok) throw new Error(`Failed to load HTML: ${url}`);
4-
return res.text();
2+
const res = await fetch(url);
3+
if (!res.ok) throw new Error(`Failed to load HTML: ${url}`);
4+
return res.text();
55
}
66

77
function loadScript(url) {
8-
return new Promise((resolve, reject) => {
9-
const script = document.createElement("script");
10-
script.src = url;
11-
script.defer = true;
12-
script.onload = resolve;
13-
script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
14-
document.body.appendChild(script);
15-
});
8+
return new Promise((resolve, reject) => {
9+
const script = document.createElement("script");
10+
script.src = url;
11+
script.defer = true;
12+
script.onload = resolve;
13+
script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
14+
document.body.appendChild(script);
15+
});
1616
}
1717

1818
async function bootstrap() {
19-
const appRoot = document.getElementById("app");
20-
if (!appRoot) throw new Error("Missing #app container");
19+
const appRoot = document.getElementById("app");
20+
if (!appRoot) throw new Error("Missing #app container");
2121

22-
appRoot.innerHTML = await loadHtml("html/body.html");
22+
appRoot.innerHTML = await loadHtml("html/body.html");
2323

24-
const scripts = [
25-
"js/supabase.js",
26-
"js/state.js",
27-
"js/ui.js",
28-
"js/cache.js",
29-
"js/data.js",
30-
"js/home.js",
31-
"js/views.js",
32-
"js/admin.js",
33-
"js/feedback.js",
34-
"js/modals.js",
35-
"js/export.js",
36-
];
24+
const scripts = [
25+
"js/skeleton.js",
26+
"js/supabase.js",
27+
"js/state.js",
28+
"js/ui.js",
29+
"js/cache.js",
30+
"js/data.js",
31+
"js/home.js",
32+
"js/views.js",
33+
"js/admin.js",
34+
"js/feedback.js",
35+
"js/modals.js",
36+
"js/export.js",
37+
];
3738

38-
for (const src of scripts) {
39-
await loadScript(src);
40-
}
39+
for (const src of scripts) {
40+
await loadScript(src);
41+
}
4142

42-
if (typeof initApp === "function") {
43-
initApp().catch((err) => console.error("App init failed:", err));
44-
}
43+
if (typeof initApp === "function") {
44+
initApp().catch((err) => console.error("App init failed:", err));
45+
}
4546
}
4647

4748
window.addEventListener("DOMContentLoaded", () => {
48-
bootstrap().catch((err) => {
49-
console.error(err);
50-
const appRoot = document.getElementById("app");
51-
if (appRoot) appRoot.innerHTML = `<div class="empty">⚠️ ${err.message}</div>`;
52-
});
53-
});
49+
bootstrap().catch((err) => {
50+
console.error(err);
51+
const appRoot = document.getElementById("app");
52+
if (appRoot)
53+
appRoot.innerHTML = `<div class="empty">⚠️ ${err.message}</div>`;
54+
});
55+
});

‎assests/android-chrome-192x192.png‎

30.1 KB
Loading

‎assests/android-chrome-512x512.png‎

141 KB
Loading

‎assests/apple-touch-icon.png‎

27 KB
Loading

‎assests/favicon-16x16.png‎

743 Bytes
Loading

‎assests/favicon-32x32.png‎

1.78 KB
Loading

‎assests/favicon.ico‎

15 KB
Binary file not shown.

‎assests/site.webmanifest‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

‎index.html‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,31 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://xkzadsnvjdrspymgcoaq.supabase.co" />
6+
<meta
7+
http-equiv="Content-Security-Policy"
8+
content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://xkzadsnvjdrspymgcoaq.supabase.co"
9+
/>
710
<title>Info Links</title>
8-
<link rel="stylesheet" href="styles/app.css">
11+
<link
12+
rel="apple-touch-icon"
13+
sizes="180x180"
14+
href="assests//apple-touch-icon.png"
15+
/>
16+
<link
17+
rel="icon"
18+
type="image/png"
19+
sizes="32x32"
20+
href="assests//favicon-32x32.png"
21+
/>
22+
<link
23+
rel="icon"
24+
type="image/png"
25+
sizes="16x16"
26+
href="assests//favicon-16x16.png"
27+
/>
28+
<link rel="icon" type="image/x-icon" href="assests/favicon.ico" />
29+
<link rel="manifest" href="assests//site.webmanifest" />
30+
<link rel="stylesheet" href="styles/app.css" />
931
</head>
1032
<body>
1133
<div id="app"></div>

‎js/data.js‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,15 @@ function _renderAfterLoad() {
4949
}
5050

5151
async function loadAll() {
52-
document.getElementById("coursesOutput").innerHTML =
53-
'<div class="loader"><div class="spinner"></div> Loading courses…</div>';
52+
// Show skeleton on first load (when containers are empty),
53+
// fall back to a simple spinner on subsequent admin refreshes.
54+
const isFirstLoad = !document.getElementById("coursesOutput").dataset.loaded;
55+
if (isFirstLoad) {
56+
showSkeleton();
57+
} else {
58+
document.getElementById("coursesOutput").innerHTML =
59+
'<div class="loader"><div class="spinner"></div> Loading…</div>';
60+
}
5461
document.getElementById("extraSection").innerHTML = "";
5562
try {
5663
// Admins always get fresh data so they see their own changes.
@@ -112,6 +119,7 @@ async function loadAll() {
112119
extraSections,
113120
extraLinks,
114121
);
122+
document.getElementById("coursesOutput").dataset.loaded = "1"; // mark loaded
115123
_renderAfterLoad();
116124
} catch (e) {
117125
document.getElementById("coursesOutput").innerHTML =
@@ -221,4 +229,4 @@ function renderAllCourses() {
221229
});
222230

223231
document.getElementById("coursesOutput").innerHTML = html;
224-
}
232+
}

0 commit comments

Comments
 (0)