Skip to content

Commit 14a0696

Browse files
author
djinni-hppro
committed
super fast loading
1 parent ddd7024 commit 14a0696

4 files changed

Lines changed: 67 additions & 22 deletions

File tree

‎src/helpers.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,32 @@ const promiseTimeout = (p, ms=30e3) => Promise.race([
1212
new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
1313
]);
1414

15+
const loadScript = (src, id) => {
16+
return new Promise((resolve, reject) => {
17+
if (document.getElementById(id)) return resolve();
18+
const script = document.createElement('script');
19+
script.src = src;
20+
script.id = id;
21+
script.async = true;
22+
script.onload = resolve;
23+
script.onerror = reject;
24+
document.head.appendChild(script);
25+
});
26+
};
27+
28+
const loadStyle = (href, id) => {
29+
return new Promise((resolve, reject) => {
30+
if (document.getElementById(id)) return resolve();
31+
const link = document.createElement('link');
32+
link.href = href;
33+
link.id = id;
34+
link.rel = 'stylesheet';
35+
link.onload = resolve;
36+
link.onerror = reject;
37+
document.head.appendChild(link);
38+
});
39+
};
40+
1541
// --- Crypto Helpers ---
1642

1743
// Helper function to convert buffer to base64

‎src/index.html‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ <h3 class="text-lg font-bold p-1 md:p-0" x-text="noteEditorNoteId ? ('Editing: #
178178
<p class="text-xs text-gray-400 italic mb-2"><span x-text="formatDate(note.updatedAt)"></span><span x-show="note.priority" x-text="' - Priority: ' + note.priority"></span></p>
179179
<h4 class="cursor-pointer text-lg text-gray-800 font-bold truncate mb-2" x-text="note.title"></h4>
180180
<template x-if="getCoverImage(note)">
181-
<img :src="getCoverImage(note)" alt="Note cover image" class="w-full h-32 object-cover rounded-md mb-2">
181+
<img :src="getCoverImage(note)" loading="lazy" alt="Note cover image" class="w-full h-32 object-cover rounded-md mb-2">
182182
</template>
183183
<p class="cursor-pointer text-sm text-gray-600 line-clamp-5 pl-1" x-text="getNotePreview(note.content)"></p>
184184
<template x-if="note.reminder">
@@ -197,7 +197,6 @@ <h4 class="cursor-pointer text-lg text-gray-800 font-bold truncate mb-2" x-text=
197197
<button @click.stop="increasePriority(note.id)" class="cursor-pointer rounded-full text-gray-50 bg-green-500 hover:bg-green-700" aria-label="Increase Priority">
198198
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-circle" viewBox="0 0 20 20">
199199
<path fillRule="evenodd" d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z" clipRule="evenodd" />
200-
201200
</svg>
202201
</button>
203202
<button @click.stop="decreasePriority(note.id)" class="cursor-pointer rounded-full text-gray-50 bg-green-400 hover:bg-green-300" aria-label="Decrease Priority">
@@ -514,18 +513,12 @@ <h4 class="font-bold text-sm" x-text="toast.title"></h4>
514513
<noscript><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /></noscript>
515514
<link rel="preload" as="font" href="//maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.woff2?v=4.7.0" crossorigin />
516515

517-
<link rel="preload" href="//cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
518-
<noscript><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css" /></noscript>
519-
<script async defer src="//cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
520-
521-
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> -->
522516
<link rel="preload" href="//cdn.jsdelivr.net/gh/reallygoodsoftware/tailwind-lite/dist/2.0.1.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
523517
<noscript><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/reallygoodsoftware/tailwind-lite/dist/2.0.1.css" /></noscript>
524518

525519
<script async defer src="//cdn.jsdelivr.net/npm/@mozilla/readability@0.x.x/Readability.min.js"></script>
526520
<script async defer src="//cdn.jsdelivr.net/npm/nostr-tools@2.16.2/lib/nostr.bundle.min.js"></script>
527521
<script async defer src="//cdn.jsdelivr.net/npm/minisearch@7.1.2/dist/umd/index.min.js"></script>
528-
<script async defer src="/libs/aws-sdk-2.1692.0.min.js"></script>
529522

530523
<link rel="preload" href="/index.css?v=___VERSION___" as="style" onload="this.onload=null;this.rel='stylesheet'" />
531524
<noscript><link rel="stylesheet" href="/index.css?v=___VERSION___"/></noscript>
@@ -584,15 +577,7 @@ <h4 class="font-bold text-sm" x-text="toast.title"></h4>
584577
<!-- Excalidraw -->
585578

586579
<!-- Latex -->
587-
<link rel="preload" href="//cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
588-
<noscript><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css"></noscript>
589-
<link rel="preload" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/default.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
590-
<noscript><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/default.min.css"></noscript>
591-
<script async defer src="//cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.js"></script>
592-
<script async defer src="//cdn.jsdelivr.net/npm/marked@16.4.0/lib/marked.umd.min.js"></script>
593-
<script async defer src="//cdn.jsdelivr.net/npm/marked-katex-extension@5.1.5/lib/index.umd.min.js"></script>
594-
<script async defer src="//cdn.jsdelivr.net/npm/marked-highlight@2.2.2/lib/index.umd.min.js"></script>
595-
<script async defer src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
580+
<!-- Loaded dynamically -->
596581
<!-- Latex -->
597582

598583
</html>

‎src/index.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1011,7 +1011,32 @@ document.addEventListener('alpine:init', () => { Alpine.data('mainApp', () => ({
10111011
}
10121012
},
10131013

1014-
prepareEasyMDE(id) {
1014+
async prepareEasyMDE(id) {
1015+
if (!window.EasyMDE || !window.marked) {
1016+
this.easyMDEIniting = true;
1017+
try {
1018+
await Promise.all([
1019+
loadStyle('//cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css', 'easymde-css'),
1020+
loadScript('//cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js', 'easymde-js'),
1021+
loadScript('//cdn.jsdelivr.net/npm/marked@16.4.0/lib/marked.umd.min.js', 'marked-js'),
1022+
1023+
loadStyle('//cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.css', 'katex-css'),
1024+
loadScript('//cdn.jsdelivr.net/npm/katex@0.16.23/dist/katex.min.js', 'katex-js'),
1025+
loadStyle('//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/default.min.css', 'highlight-css'),
1026+
loadScript('//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js', 'highlight-js'),
1027+
]);
1028+
await Promise.all([
1029+
loadScript('//cdn.jsdelivr.net/npm/marked-katex-extension@5.1.5/lib/index.umd.min.js', 'marked-katex-js'),
1030+
loadScript('//cdn.jsdelivr.net/npm/marked-highlight@2.2.2/lib/index.umd.min.js', 'marked-highlight-js'),
1031+
]);
1032+
} catch (e) {
1033+
console.error('Failed to load editor resources', e);
1034+
this.easyMDEIniting = false;
1035+
this.showToast({ variant: 'error', title: 'Error', description: 'Failed to load editor resources. Check your connection.' });
1036+
return;
1037+
}
1038+
}
1039+
10151040
if (!window.EasyMDE) return;
10161041

10171042
this.noteEditorVisible = false;

‎src/s3.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
// --- S3 Functions (Client-side AWS SDK v2) ---
2-
// Assumes AWS SDK is loaded globally
2+
// Assumes AWS SDK is loaded globally or loaded dynamically
33
const getS3Client = async (creds) => {
4-
const maxWaitTime = 30000; // 30 seconds
5-
const interval = 1000; // 1 second
4+
if (!self.AWS && typeof loadScript === 'function') {
5+
try {
6+
await loadScript('/libs/aws-sdk-2.1692.0.min.js', 'aws-sdk-js');
7+
} catch (e) {
8+
console.error('Failed to load AWS SDK', e);
9+
throw new Error('AWS SDK failed to load. Check your connection.');
10+
}
11+
}
12+
13+
const maxWaitTime = 5000; // Reduced wait time since we use loadScript
14+
const interval = 500;
615
let elapsedTime = 0;
716

817
while (!self.AWS && elapsedTime < maxWaitTime) {
@@ -11,7 +20,7 @@ const getS3Client = async (creds) => {
1120
}
1221

1322
if (!self.AWS) {
14-
throw new Error('AWS SDK failed to load within 30 seconds.');
23+
throw new Error('AWS SDK failed to load.');
1524
}
1625

1726
// The AWS object will be in the global scope (window or self)

0 commit comments

Comments
 (0)