kudzues/component-party
1
0
Fork 0
mirror of https://github.com/lainbo/component-party.git synced 2026-04-05 13:09:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(vitals): improve CLS (#271)

Browse Source 
* feat(snippet): add skeleton while loading

* feat(snippet): add skeleton while loading
This commit is contained in:
Mathieu Schimmerling
2024-10-27 13:24:28 +01:00
committed by GitHub
parent 8de99a30e0
commit 8e2f4059f0
2 changed files with 76 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -601,7 +601,7 @@ pnpm i
pnpm run dev
```
This project requires Node.js to be `v16.0.0` or higher.
This project requires Node.js to be `v20` or higher.
### Principle when add/edit a framework snippet

95
src/Index.svelte
View File

@@ -144,15 +144,29 @@
saveFrameworkIdsSelectedOnStorage();
}
let snippetsByFrameworkIdLoading = $state(new SvelteSet());
let snippetsByFrameworkIdError = $state(new SvelteSet());
$effect(async () => {
for (const frameworkId of [...frameworkIdsSelected]) {
if (!snippetsByFrameworkId.has(frameworkId)) {
const frameworkSnippets = (
Promise.all(
[...frameworkIdsSelected].map(async (frameworkId) => {
if (!snippetsByFrameworkId.has(frameworkId)) {
snippetsByFrameworkIdError.delete(frameworkId);
snippetsByFrameworkIdLoading.add(frameworkId);
await snippetsImporterByFrameworkId[frameworkId]()
).default;
snippetsByFrameworkId.set(frameworkId, frameworkSnippets);
}
}
.then(({ default: frameworkSnippets }) => {
snippetsByFrameworkId.set(frameworkId, frameworkSnippets);
})
.catch(() => {
snippetsByFrameworkIdError.add(frameworkId);
})
.finally(() => {
snippetsByFrameworkIdLoading.delete(frameworkId);
});
}
})
);
});
const MAX_FRAMEWORK_NB_INITIAL_DISPLAYED = 10;
@@ -332,16 +346,21 @@
{@const frameworkSnippet = snippetsByFrameworkId
.get(frameworkId)
?.find((s) => s.snippetId === snippet.snippetId)}
{#if frameworkSnippet}
<div style:margin-top="0rem" style:order="0">
<div
class="flex justify-between items-center space-x-3"
{@const frameworkSnippetIsLoading =
snippetsByFrameworkIdLoading.has(frameworkId)}
{@const frameworkSnippetIsError =
snippetsByFrameworkIdError.has(frameworkId)}
<div style:margin-top="0rem" style:order="0">
<div
class="flex justify-between items-center space-x-3"
>
<h3
style="margin-top: 0rem; margin-bottom: 0rem;"
>
<h3
style="margin-top: 0rem; margin-bottom: 0rem;"
>
<FrameworkLabel id={framework.id} />
</h3>
<FrameworkLabel id={framework.id} />
</h3>
{#if frameworkSnippet}
<div class="flex items-center space-x-3">
{#if frameworkSnippet.playgroundURL}
<a
@@ -362,8 +381,10 @@
</a>
{/if}
</div>
</div>
<div class="mt-2">
{/if}
</div>
<div class="mt-2">
{#if frameworkSnippet}
{#if frameworkSnippet.files.length > 0}
<CodeEditor
files={frameworkSnippet.files}
@@ -416,9 +437,43 @@
</div>
</div>
{/if}
</div>
{:else if frameworkSnippetIsLoading}
<div role="status">
<div
class="w-75px h-23px bg-[#0d1117] py-3 px-4 rounded-t"
>
<div
class="h-2.5 rounded-full bg-gray-700 w-10 animate-pulse"
></div>
</div>
<div
class="w-630px h-164px bg-[#0d1117] px-4 py-7"
>
<div class="max-w-sm animate-pulse">
<div
class="h-3.5 rounded-full bg-gray-700 w-48 mb-4"
></div>
<div
class="h-3.5 rounded-full bg-gray-700 max-w-[360px] mb-2.5"
></div>
<div
class="h-3.5 rounded-full bg-gray-700 mb-4"
></div>
<div
class="h-3.5 rounded-full bg-gray-700 max-w-[330px] mb-2.5"
></div>
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
{:else if frameworkSnippetIsError}
<p class="text-orange-500">
Error loading snippets. Please reload the
page.
</p>
{/if}
</div>
{/if}
</div>
{/each}
</div>
{/if}