Skip to content
Permalink
Browse files

fix(loading): allow html content (#18242)

fixes #18135
  • Loading branch information...
liamdebeasi committed May 9, 2019
1 parent 7bb6a8e commit a6cb5f218e6ce2dbe9ab251c4325b856eeffcf64
@@ -2,6 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me

import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
import { sanitizeDOMString } from '../../utils/sanitization';
import { getClassMap } from '../../utils/theme';

import { iosEnterAnimation } from './animations/ios.enter';
@@ -196,7 +197,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
</div>
)}

{this.message && <div class="loading-content">{this.message}</div>}
{this.message && <div class="loading-content" innerHTML={sanitizeDOMString(this.message)}></div>}
</div>
];
}
@@ -26,6 +26,10 @@ test('loading: backdrop standalone', async () => {
await testLoading(DIRECTORY, '#backdrop-loading');
});

test('loading: html content basic', async () => {
await testLoading(DIRECTORY, '#html-content-loading');
});

/**
* RTL Tests
*/
@@ -53,3 +57,7 @@ test('loading:rtl: custom class basic', async () => {
test('loading:rtl: backdrop standalone', async () => {
await testLoading(DIRECTORY, '#backdrop-loading', true);
});

test('loading:rtl: html content basic', async () => {
await testLoading(DIRECTORY, '#html-content-loading', true);
});
@@ -28,6 +28,7 @@
<ion-button id="translucent-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000, message: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
<ion-button id="custom-class-loading" expand="block" onclick="presentLoadingWithOptions({duration: 5000,message: 'Please wait...', cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
<ion-button id="backdrop-loading" expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
<ion-button id="html-content-loading" expand="block" onclick="presentLoadingWithOptions({cssClass: 'html-loading', duration: 5000, message: '<ion-button>Click impatiently to load faster</ion-button>'})">Show Loading with HTML content</ion-button>

<ion-loading-controller></ion-loading-controller>

@@ -82,6 +83,10 @@
</script>

<style>
.html-loading {
--max-width: auto;
}
.custom-loading {
--background: rgba(37, 210, 223, 0.8);
--spinner-color: white;

0 comments on commit a6cb5f2

Please sign in to comment.
You can’t perform that action at this time.