adam.goldsmith/reservations_display
1
0
Fork 0
Code Issues Pull Requests 1 Activity

Add a loading spinner to wall-display

Browse Source 
Spinner GIF derived from https://loading.io/, using `apng2gif` to get
correct transparency behavior
This commit is contained in:
Adam Goldsmith 2022-12-10 12:45:32 -05:00
parent cf0127c5a8
commit 084f398d41
5 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

14
src/modal.css Normal file
View File

@ -0,0 +1,14 @@
.modal {
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#loadingSpinner {
background-image: url(./loading.gif);
background-repeat: no-repeat;
background-position: center;
}

1
src/wall-display.html
View File

@ -7,6 +7,7 @@
<title>Tool Reservations</title> <title>Tool Reservations</title>
</head> </head>
<body> <body>
<div class="modal" id="loadingSpinner"></div>
<div id="calendar"></div> <div id="calendar"></div>
<script src="bundle-wall-display.js"></script> <script src="bundle-wall-display.js"></script>
</body> </body>

7
src/wall-display.ts
View File

@ -10,6 +10,7 @@ import { CalendarOptions } from '@fullcalendar/core';
import { common_calendarOptions, main } from './common'; import { common_calendarOptions, main } from './common';
import './wall-display.html'; import './wall-display.html';
import './modal.css';
import './ios-fixes.css'; import './ios-fixes.css';
document.body.addEventListener('touchmove', (e) => e.preventDefault(), { document.body.addEventListener('touchmove', (e) => e.preventDefault(), {
@ -29,6 +30,12 @@ const calendarOptions: CalendarOptions = {
}; };
}) })
: [], : [],
loading(isLoading: boolean) {
const spinner = document.getElementById('loadingSpinner');
if (spinner) {
spinner.style.display = isLoading ? '' : 'none';
}
},
}; };
const calendar = main(calendarOptions, !toolFilter); const calendar = main(calendarOptions, !toolFilter);

4
webpack.config.js
View File

@ -4,6 +4,10 @@ const common = {
mode: 'development', mode: 'development',
module: { module: {
rules: [ rules: [
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
type: 'asset/resource',
},
{ {
test: /\.css$/i, test: /\.css$/i,
use: ['style-loader', 'css-loader'], use: ['style-loader', 'css-loader'],