├── .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 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | Loading... 42 | 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 | --------------------------------------------------------------------------------