feat(plugins/loadingIndicator): migrate plugin

examples/snowbox/index.js

@@ -9,6 +9,7 @@
 import pluginFullscreen from '@polar/polar/plugins/fullscreen'
 import pluginIconMenu from '@polar/polar/plugins/iconMenu'
 import pluginLayerChooser from '@polar/polar/plugins/layerChooser'
+import pluginLoadingIndicator from '@polar/polar/plugins/loadingIndicator'
 import pluginToast from '@polar/polar/plugins/toast'
 import EmptyComponent from './EmptyComponent.vue'
 import styleJsonUrl from './style.json?url'
@@ -56,7 +57,7 @@
 	},
 }
 
 // TODO: Re-enable with isSelectable
 /*
 // arbitrary condition for testing
 const isEvenId = (mmlid) => Number(mmlid.slice(-1)) % 2 === 0
@@ -76,7 +77,7 @@
 		colorScheme,
 		startCenter: [573364, 6028874],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -149,14 +150,14 @@
 						stroke: '#FFFFFF',
 						fill: '#333333',
 					},
 					// TODO(dopenguin): Has some HMR issues, needs to be fixed
 					// isSelectable: isReportSelectable,
 				},
 			],
 			clusterClickZoom: true,
 		},
 		// theme: dataportTheme,
 		/*
 			TODO(dopenguin): Surrounding application should be able give information about dark or light mode via update of a state parameter; light mode by default
 		 */
 		locales: [
@@ -216,6 +217,12 @@
 		layoutTag: 'BOTTOM_MIDDLE',
 	})
 )
+addPlugin(
+	map,
+	pluginLoadingIndicator({
+		loaderStyle: 'BasicLoader',
+	})
+)
 addPlugin(
 	map,
 	pluginIconMenu({
@@ -233,7 +240,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: {
@@ -276,6 +283,10 @@
 	severity: 'error',
 })
 
+const loadingIndicatorStore = getStore(map, 'loadingIndicator')
+loadingIndicatorStore.addLoadingKey('loadingTest')
+setTimeout(() => loadingIndicatorStore.removeLoadingKey('loadingTest'), 2000)
+
 subscribe(
 	map,
 	'core',

src/core/types/main.ts

@@ -6,6 +6,7 @@
 import type { LocaleOverride } from './locales'
 import type { FullscreenPluginOptions } from '@/plugins/fullscreen'
 import type { IconMenuPluginOptions } from '@/plugins/iconMenu'
+import type { LoadingIndicatorOptions } from '@/plugins/loadingIndicator'
 import type { ToastPluginOptions } from '@/plugins/toast'
 
 export interface ServiceAvailabilityCheck {
@@ -282,10 +283,9 @@
 	 * The default is to use KERN's standard theme.
 	 */
 	theme?: PolarTheme
-
 	// Plugins are not sorted alphabetical, but listed last.
 	// Remember to sort them alphabetical inside their space.
 	// TODO: Generate this section via types/plugin.ts
 	/* eslint-disable perfectionist/sort-interfaces */
 
 	/**
@@ -298,11 +298,15 @@
 	 */
 	iconMenu?: IconMenuPluginOptions
 
+	/**
+	 * Configuration for loadingIndicator plugin.
+	 */
+	loadingIndicator?: LoadingIndicatorOptions
+
 	/**
 	 * Configuration for toast plugin.
 	 */
 	toast?: ToastPluginOptions
-
 	/* eslint-enable perfectionist/sort-interfaces */
 }
 

src/core/types/plugin.ts

@@ -15,6 +15,9 @@
 import type { useLayerChooserStore as LayerChooserStore } from '@/plugins/layerChooser/store'
 import type { resourcesEn as LayerChooserResources } from '@/plugins/layerChooser/locales'
 
+import type { PluginId as LoadingIndicatorId } from '@/plugins/loadingIndicator'
+import type { useLoadingIndicatorStore as LoadingIndicatorStore } from '@/plugins/loadingIndicator/store'
+
 import type { PluginId as ToastPluginId } from '@/plugins/toast'
 import type { useToastStore as ToastStore } from '@/plugins/toast/store'
 import type { resourcesEn as ToastResources } from '@/plugins/toast/locales'
@@ -39,12 +42,13 @@
 	| typeof FullscreenPluginId
 	| typeof IconMenuPluginId
 	| typeof LayerChooserPluginId
+	| typeof LoadingIndicatorId
 	| typeof ToastPluginId
 
 type GetPluginStore<
 	T extends BundledPluginId,
 	I extends BundledPluginId,
 	// TODO: This fixes the type error, but relaxes type-checking for the plugin store too much.
 	// However, it is not clear if Pinia's type system allows for stronger checks at the moment.
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	S extends PolarPluginStore<any>,
@@ -55,6 +59,7 @@
 	| GetPluginStore<T, typeof FullscreenPluginId, typeof FullscreenStore>
 	| GetPluginStore<T, typeof IconMenuPluginId, typeof IconMenuStore>
 	| GetPluginStore<T, typeof LayerChooserPluginId, typeof LayerChooserStore>
+	| GetPluginStore<T, typeof LoadingIndicatorId, typeof LoadingIndicatorStore>
 	| GetPluginStore<T, typeof ToastPluginId, typeof ToastStore>
 
 type GetPluginResources<

src/plugins/loadingIndicator/components/LoadingIndicator.ce.vue

@@ -0,0 +1,78 @@
+<template>
+	<div
+		v-if="showLoader && loaderStyle !== null"
+		class="polar-plugin-loading-indicator-wrapper"
+	>
+		<div
+			v-if="layout === 'standard'"
+			class="polar-plugin-loading-indicator-overlay"
+		/>
+		<PolarCard>
+			<div
+				v-if="loaderStyle === 'KernLoader'"
+				class="kern-loader kern-loader--visible"
+				role="status"
+			/>
+			<component
+				:is="customStyles[loaderStyle]"
+				v-else
+				class="kern-loader--visible"
+				role="status"
+			/>
+		</PolarCard>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useLoadingIndicatorStore } from '../store'
+import {
+	BasicLoader,
+	CircleLoader,
+	RingLoader,
+	RollerLoader,
+	SpinnerLoader,
+} from './loaderStyles'
+import PolarCard from '@/components/PolarCard.ce.vue'
+import { useCoreStore } from '@/core/stores/export.ts'
+
+const { layout } = storeToRefs(useCoreStore())
+const { loaderStyle, showLoader } = storeToRefs(useLoadingIndicatorStore())
+const customStyles = {
+	BasicLoader,
+	CircleLoader,
+	RingLoader,
+	RollerLoader,
+	SpinnerLoader,
+}
+</script>
+
+<style scoped>
+.polar-plugin-loading-indicator-wrapper {
+	z-index: 100;
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+
+	.polar-plugin-loading-indicator-overlay {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		opacity: var(--kern-color-action-state-opacity-overlay);
+		background: #fff;
+	}
+
+	.kern-card {
+		min-width: fit-content;
+		height: fit-content;
+		border-radius: 50%;
+	}
+
+	:deep(.kern-card__container) {
+		padding: var(--kern-metric-space-small) !important;
+	}
+}
+</style>

src/plugins/loadingIndicator/components/loaderStyles/BasicLoader.ce.vue

@@ -0,0 +1,108 @@
+<template>
+	<div class="lds-default">
+		<div v-for="i in 12" :key="i" />
+	</div>
+</template>
+
+<script setup lang="ts">
+// eslint-ignore-next-line @stylistic/lines-around-comment
+/**
+ * This loader is the lds-default loader from https://loading.io/css/.
+ * It was renamed to BasicLoaderLoader to avoid confusion with the default loader.
+ */
+</script>
+
+<style scoped>
+.lds-default {
+	color: var(--kern-color-action-default);
+}
+.lds-default,
+.lds-default div {
+	box-sizing: border-box;
+}
+.lds-default {
+	display: inline-block;
+	position: relative;
+	width: 80px;
+	height: 80px;
+}
+.lds-default div {
+	position: absolute;
+	width: 6.4px;
+	height: 6.4px;
+	background: currentColor;
+	border-radius: 50%;
+	animation: lds-default 1.2s linear infinite;
+}
+.lds-default div:nth-child(1) {
+	animation-delay: 0s;
+	top: 36.8px;
+	left: 66.24px;
+}
+.lds-default div:nth-child(2) {
+	animation-delay: -0.1s;
+	top: 22.08px;
+	left: 62.29579px;
+}
+.lds-default div:nth-child(3) {
+	animation-delay: -0.2s;
+	top: 11.30421px;
+	left: 51.52px;
+}
+.lds-default div:nth-child(4) {
+	animation-delay: -0.3s;
+	top: 7.36px;
+	left: 36.8px;
+}
+.lds-default div:nth-child(5) {
+	animation-delay: -0.4s;
+	top: 11.30421px;
+	left: 22.08px;
+}
+.lds-default div:nth-child(6) {
+	animation-delay: -0.5s;
+	top: 22.08px;
+	left: 11.30421px;
+}
+.lds-default div:nth-child(7) {
+	animation-delay: -0.6s;
+	top: 36.8px;
+	left: 7.36px;
+}
+.lds-default div:nth-child(8) {
+	animation-delay: -0.7s;
+	top: 51.52px;
+	left: 11.30421px;
+}
+.lds-default div:nth-child(9) {
+	animation-delay: -0.8s;
+	top: 62.29579px;
+	left: 22.08px;
+}
+.lds-default div:nth-child(10) {
+	animation-delay: -0.9s;
+	top: 66.24px;
+	left: 36.8px;
+}
+.lds-default div:nth-child(11) {
+	animation-delay: -1s;
+	top: 62.29579px;
+	left: 51.52px;
+}
+.lds-default div:nth-child(12) {
+	animation-delay: -1.1s;
+	top: 51.52px;
+	left: 62.29579px;
+}
+@keyframes lds-default {
+	0%,
+	20%,
+	80%,
+	100% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.5);
+	}
+}
+</style>

src/plugins/loadingIndicator/components/loaderStyles/CircleLoader.ce.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="lds-circle"><div /></div>
+</template>
+
+<script lang="ts">
+export default {}
+</script>
+
+<style scoped>
+.lds-circle {
+	color: var(--kern-color-action-default);
+}
+.lds-circle,
+.lds-circle div {
+	box-sizing: border-box;
+}
+.lds-circle {
+	display: inline-block;
+	transform: translateZ(1px);
+	width: 80px;
+	height: 80px;
+}
+.lds-circle > div {
+	display: inline-block;
+	width: 64px;
+	height: 64px;
+	margin: 8px;
+	background: currentColor;
+	border-radius: 50%;
+	animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+@keyframes lds-circle {
+	0%,
+	100% {
+		animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+	}
+	0% {
+		transform: rotateY(0deg);
+	}
+	50% {
+		transform: rotateY(1800deg);
+		animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+	}
+	100% {
+		transform: rotateY(3600deg);
+	}
+}
+</style>

src/plugins/loadingIndicator/components/loaderStyles/RingLoader.ce.vue

@@ -0,0 +1,55 @@
+<template>
+	<div class="lds-ring">
+		<div v-for="i in 4" :key="i" />
+	</div>
+</template>
+
+<script lang="ts">
+export default {}
+</script>
+
+<style scoped>
+.lds-ring {
+	/* change color here */
+	color: var(--kern-color-action-default);
+}
+.lds-ring,
+.lds-ring div {
+	box-sizing: border-box;
+}
+.lds-ring {
+	display: inline-block;
+	position: relative;
+	width: 80px;
+	height: 80px;
+}
+.lds-ring div {
+	box-sizing: border-box;
+	display: block;
+	position: absolute;
+	width: 64px;
+	height: 64px;
+	margin: 8px;
+	border: 8px solid currentColor;
+	border-radius: 50%;
+	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+	border-color: currentColor transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+	animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+	animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+	animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+</style>