diff --git a/src/loading.gif b/src/loading.gif
new file mode 100644
index 0000000..f279997
Binary files /dev/null and b/src/loading.gif differ
diff --git a/src/modal.css b/src/modal.css
new file mode 100644
index 0000000..194099e
--- /dev/null
+++ b/src/modal.css
@@ -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;
+}
diff --git a/src/wall-display.html b/src/wall-display.html
index 2a10aa9..94686f9 100644
--- a/src/wall-display.html
+++ b/src/wall-display.html
@@ -7,6 +7,7 @@
Tool Reservations
+
diff --git a/src/wall-display.ts b/src/wall-display.ts
index c8dd9dc..c9bce60 100644
--- a/src/wall-display.ts
+++ b/src/wall-display.ts
@@ -10,6 +10,7 @@ import { CalendarOptions } from '@fullcalendar/core';
import { common_calendarOptions, main } from './common';
import './wall-display.html';
+import './modal.css';
import './ios-fixes.css';
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);
diff --git a/webpack.config.js b/webpack.config.js
index 6964530..d6202b4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -4,6 +4,10 @@ const common = {
mode: 'development',
module: {
rules: [
+ {
+ test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
+ type: 'asset/resource',
+ },
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],