├── .codesandbox
└── workspace.json
├── App.svelte
├── LoadingOverlay.svelte
├── README.md
├── index.js
├── loading-overlay-queue.js
├── package.json
├── public
└── index.html
└── rollup.config.js
/.codesandbox/workspace.json:
--------------------------------------------------------------------------------
1 | {
2 | "responsive-preview": {
3 | "Mobile": [
4 | 320,
5 | 675
6 | ],
7 | "Tablet": [
8 | 1024,
9 | 765
10 | ],
11 | "Desktop": [
12 | 1400,
13 | 800
14 | ],
15 | "Desktop HD": [
16 | 1920,
17 | 1080
18 | ]
19 | }
20 | }
--------------------------------------------------------------------------------
/App.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
20 | {#if $isLoadingOverlayShown}
21 |
22 | {/if}
23 |
24 |
25 |
Number of requests: {$loadingOverlayQueue.length}
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/LoadingOverlay.svelte:
--------------------------------------------------------------------------------
1 |
31 |
32 |
33 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte-loading-overlay
2 | Created with CodeSandbox
3 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import App from "./App.svelte";
2 |
3 | const app = new App({
4 | target: document.body
5 | });
6 |
7 | export default app;
8 |
--------------------------------------------------------------------------------
/loading-overlay-queue.js:
--------------------------------------------------------------------------------
1 | import { writable, derived } from "svelte/store";
2 | import { nanoid } from "nanoid";
3 |
4 | export const loadingOverlayQueue = writable([]);
5 |
6 | export function showLoadingOverlay() {
7 | const newRequestId = nanoid();
8 |
9 | loadingOverlayQueue.update((currentValue) => [...currentValue, newRequestId]);
10 |
11 | return newRequestId;
12 | }
13 |
14 | export function hideLoadingOverlay(requestId) {
15 | loadingOverlayQueue.update((currentValue) =>
16 | currentValue.filter((item) => item !== requestId)
17 | );
18 | }
19 |
20 | export const isLoadingOverlayShown = derived(
21 | loadingOverlayQueue,
22 | (requests) => requests.length > 0
23 | );
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte",
3 | "version": "1.0.0",
4 | "devDependencies": {
5 | "npm-run-all": "^4.1.5",
6 | "rollup": "^1.10.1",
7 | "rollup-plugin-commonjs": "^9.3.4",
8 | "rollup-plugin-node-resolve": "^4.2.3",
9 | "rollup-plugin-svelte": "^6.1.1",
10 | "rollup-plugin-terser": "^4.0.4",
11 | "sirv-cli": "^0.3.1"
12 | },
13 | "dependencies": {
14 | "nanoid": "3.3.4",
15 | "svelte": "^3.32.3"
16 | },
17 | "scripts": {
18 | "build": "rollup -c",
19 | "autobuild": "rollup -c -w",
20 | "dev": "run-p start:dev autobuild",
21 | "start": "sirv public",
22 | "start:dev": "sirv public --dev"
23 | },
24 | "keywords": [
25 | "svelte",
26 | "starter"
27 | ],
28 | "description": "Svelte example starter project"
29 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Svelte app
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | // this file will not afect the sandbox but will
2 | // afect the deployment and dowload
3 |
4 | import svelte from "rollup-plugin-svelte";
5 | import resolve from "rollup-plugin-node-resolve";
6 | import commonjs from "rollup-plugin-commonjs";
7 | import { terser } from "rollup-plugin-terser";
8 |
9 | const production = !process.env.ROLLUP_WATCH;
10 |
11 | export default {
12 | input: "index.js",
13 | output: {
14 | sourcemap: true,
15 | format: "iife",
16 | name: "app",
17 | file: "public/bundle.js"
18 | },
19 | plugins: [
20 | svelte({
21 | // enable run-time checks when not in production
22 | dev: !production,
23 | // we'll extract any component CSS out into
24 | // a separate file — better for performance
25 | css: css => {
26 | css.write("public/bundle.css");
27 | }
28 | }),
29 |
30 | // If you have external dependencies installed from
31 | // npm, you'll most likely need these plugins. In
32 | // some cases you'll need additional configuration —
33 | // consult the documentation for details:
34 | // https://github.com/rollup/rollup-plugin-commonjs
35 | resolve(),
36 | commonjs(),
37 |
38 | // If we're building for production (npm run build
39 | // instead of npm run dev), minify
40 | production && terser()
41 | ]
42 | };
43 |
--------------------------------------------------------------------------------