Skip to content

Commit b24d3fb

Browse files
EssamWisamEssamWisam
committed
✨ Introduce loading animation
1 parent ce858e1 commit b24d3fb

File tree

6 files changed

+61
-33
lines changed

6 files changed

+61
-33
lines changed

‎package-lock.json

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"shiki": "^1.4.0",
3030
"svelte": "^4.2.19",
3131
"svelte-check": "^3.6.0",
32+
"svelte-loading-spinners": "^0.3.6",
3233
"tslib": "^2.4.1",
3334
"typescript": "^5.0.0",
3435
"vite": "^5.4.10"

‎src/data/Footer.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ footerLinks:
1515
link: https://sebastian.vollmer.ms/jobs/
1616
target: blank
1717
- name: About MLJ
18-
link: /About
18+
link: /about
1919
target: self
2020
- name: Contact Us
2121
link: mailto:[email protected]

‎src/lib/CheatSheetPage/CheatSheetComp.svelte

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script lang="ts">
22
// Components
33
import MarkdownIt from 'markdown-it';
4+
import { RingLoader } from 'svelte-loading-spinners';
5+
46
// Helpers
57
import { fromHighlighter } from '@shikijs/markdown-it/core';
68
import { getHighlighterCore } from 'shiki/core';
@@ -49,7 +51,11 @@
4951
</script>
5052

5153
{#if isLoading}
52-
<div>Loading...</div>
54+
<div
55+
style="width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center"
56+
>
57+
<RingLoader size="60" color="#6e4582" unit="px" duration="1s" />
58+
</div>
5359
{:else}
5460
<div style="display: flex; flex-direction: column; gap: 0rem; width: 100%">
5561
<button class="download" on:click={downloadAsPDF}>Download the Cheat Sheet</button>

‎src/lib/HomePage/Features.svelte

+39-30
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import IoIosAt from 'svelte-icons/io/IoIosAt.svelte';
99
import SvelteMarkdown from 'svelte-markdown';
1010
import IoIosCopy from 'svelte-icons/io/IoIosCopy.svelte';
11+
import { RingLoader } from 'svelte-loading-spinners';
1112
1213
// Reactive state to track the selected tab index
1314
let selectedTabIndex = 0;
@@ -44,40 +45,48 @@
4445
console.log(codeHTMLs);
4546
</script>
4647

47-
<div class="tabs">
48-
<ul style="display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap;">
49-
{#each tabs as tab, index}
50-
<li
51-
on:click={() => (selectedTabIndex = index)}
52-
class:selectedTab={selectedTabIndex === index}
53-
>
54-
{tab.title}
55-
</li>
56-
{/each}
57-
</ul>
58-
<div class="content">
59-
{#each tabs as tab, index}
60-
<section class:selectedContent={selectedTabIndex === index}>
61-
<div
62-
style="padding: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 0rem; align-items: center"
48+
{#if isLoading}
49+
<div
50+
style="width: 100%; height: 50vh; display: flex; justify-content: center; align-items: center"
51+
>
52+
<RingLoader size="60" color="#6e4582" unit="px" duration="1s" />
53+
</div>
54+
{:else}
55+
<div class="tabs">
56+
<ul style="display: flex; justify-content: center; flex-direction: row; flex-wrap: wrap;">
57+
{#each tabs as tab, index}
58+
<li
59+
on:click={() => (selectedTabIndex = index)}
60+
class:selectedTab={selectedTabIndex === index}
6361
>
64-
<h1 style="color: white; font-weight: 600;">{tab.title}</h1>
65-
{#if tab.code && !isLoading}
66-
<div class="code-container">
67-
<button on:click={() => navigator.clipboard.writeText(tab.code)} class="copy-icon">
68-
<IoIosCopy />
69-
</button>
70-
{@html codeHTMLs[index]}
62+
{tab.title}
63+
</li>
64+
{/each}
65+
</ul>
66+
<div class="content">
67+
{#each tabs as tab, index}
68+
<section class:selectedContent={selectedTabIndex === index}>
69+
<div
70+
style="padding: 0; display: flex; flex-direction: column; justify-content: space-around; gap: 0rem; align-items: center"
71+
>
72+
<h1 style="color: white; font-weight: 600;">{tab.title}</h1>
73+
{#if tab.code && !isLoading}
74+
<div class="code-container">
75+
<button on:click={() => navigator.clipboard.writeText(tab.code)} class="copy-icon">
76+
<IoIosCopy />
77+
</button>
78+
{@html codeHTMLs[index]}
79+
</div>
80+
{/if}
81+
<div class="markdown-container">
82+
<SvelteMarkdown source={tab.content} />
7183
</div>
72-
{/if}
73-
<div class="markdown-container">
74-
<SvelteMarkdown source={tab.content} />
7584
</div>
76-
</div>
77-
</section>
78-
{/each}
85+
</section>
86+
{/each}
87+
</div>
7988
</div>
80-
</div>
89+
{/if}
8190

8291
<style lang="scss">
8392
h1 {

‎src/lib/HomePage/Hero.svelte

+6-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
import { onMount } from 'svelte';
1919
import homeDataYaml from '../../data/HomePage.yaml?raw';
2020
import { goto } from '$app/navigation';
21+
import { RingLoader } from 'svelte-loading-spinners';
2122
2223
let homeData = YAML.parse(homeDataYaml);
2324
let codeHTMLs: string[] = [];
@@ -95,7 +96,11 @@
9596
</div>
9697
<div>
9798
{#if isLoading}
98-
<div>Loading...</div>
99+
<div
100+
style="width: 100%; height: 50vh; display: flex; justify-content: center; align-items: center"
101+
>
102+
<RingLoader size="60" color="#7f569f" unit="px" duration="1s" />
103+
</div>
99104
{:else}
100105
<div class="code-container">
101106
<div>

0 commit comments

Comments
 (0)