@@ -18,12 +18,13 @@
1818
1919// %1 is the template["card-background"]["elements"][0]
2020// %2 is the template["card-background"]["elements"][1]
21−// %3 is the template["card-background"] string
21+// %3 is whether the loader should be asynchronous or not
22+// %4 is the template["card-background"] string
2223var kBackgroundLoaderCode = 'Loader {\n\
2324 id: backgroundLoader; \n\
2425 objectName: "backgroundLoader"; \n\
2526 anchors.fill: parent; \n\
26− asynchronous: root.asynchronous; \n\
27+ asynchronous: %3; \n\
2728 visible: status == Loader.Ready; \n\
2829 sourceComponent: UbuntuShape { \n\
2930 objectName: "background"; \n\
@@ -46,7 +47,7 @@ var kBackgroundLoaderCode = 'Loader {\n\
4647 objectName: "backgroundImage"; \n\
4748 source: { \n\
4849 if (cardData && typeof cardData["background"] === "string") return cardData["background"]; \n\
49− else return %3; \n\
50+ else return %4; \n\
5051 } \n\
5152 } \n\
5253 function getColor(index) { \n\
@@ -63,8 +64,9 @@ var kBackgroundLoaderCode = 'Loader {\n\
6364// %3 is used as image height
6465// %4 is used for artShapeSource.hideSource and inner Loader visible
6566// %5 is used as aspect ratio fallback
66−// %6 is injected as code to artImage
67−// %7 is used as image fallback
67+// %6 is whether the loader should be asynchronous or not
68+// %7 is injected as code to artImage
69+// %8 is used as image fallback
6870var kArtShapeHolderCode = 'Item { \n\
6971 id: artShapeHolder; \n\
7072 height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
@@ -73,9 +75,9 @@ var kArtShapeHolderCode = 'Item { \n\
7375 Loader { \n\
7476 id: artShapeLoader; \n\
7577 objectName: "artShapeLoader"; \n\
76− readonly property string cardArt: cardData && cardData["art"] || %7; \n\
78+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
7779 active: cardArt != ""; \n\
78− asynchronous: root.asynchronous; \n\
80+ asynchronous: %6; \n\
7981 visible: status == Loader.Ready; \n\
8082 sourceComponent: Item { \n\
8183 id: artShape; \n\
@@ -132,10 +134,10 @@ var kArtShapeHolderCode = 'Item { \n\
132134 id: artImage; \n\
133135 objectName: "artImage"; \n\
134136 source: artShapeLoader.cardArt; \n\
135− asynchronous: root.asynchronous; \n\
137+ asynchronous: %6; \n\
136138 width: %2; \n\
137139 height: %3; \n\
138− %6 \n\
140+ %7 \n\
139141 } \n\
140142 } \n\
141143 } \n\
@@ -187,12 +189,13 @@ var kAudioButtonCode = 'AbstractButton { \n\
187189 } \n\
188190 }';
189191
192+// %1 is whether the loader should be asynchronous or not
190193var kOverlayLoaderCode = 'Loader { \n\
191194 id: overlayLoader; \n\
192195 readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
193196 anchors.fill: artShapeHolder; \n\
194197 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
195− asynchronous: root.asynchronous; \n\
198+ asynchronous: %1; \n\
196199 visible: showHeader && status == Loader.Ready; \n\
197200 sourceComponent: UbuntuShapeOverlay { \n\
198201 id: overlay; \n\
@@ -242,10 +245,11 @@ function kHeaderContainerCodeGenerator() {
242245}
243246
244247// %1 is used as anchors of mascotShapeLoader
248+// %2 is whether the loader should be asynchronous or not
245249var kMascotShapeLoaderCode = 'Loader { \n\
246250 id: mascotShapeLoader; \n\
247251 objectName: "mascotShapeLoader"; \n\
248− asynchronous: root.asynchronous; \n\
252+ asynchronous: %2; \n\
249253 active: mascotImage.status === Image.Ready; \n\
250254 visible: showHeader && active && status == Loader.Ready; \n\
251255 width: units.gu(6); \n\
@@ -414,7 +418,6 @@ function cardString(template, components, isCardTool) {
414418 property int fixedHeaderHeight: -1; \n\
415419 property size fixedArtShapeSize: Qt.size(-1, -1); \n\
416420 readonly property string title: cardData && cardData["title"] || ""; \n\
417− property bool asynchronous: true; \n\
418421 property bool showHeader: true; \n\
419422 implicitWidth: childrenRect.width; \n\
420423 enabled: %1; \n\
@@ -435,6 +438,7 @@ function cardString(template, components, isCardTool) {
435438 var hasHeaderRow = hasMascot && hasTitle;
436439 var hasAttributes = hasTitle && components["attributes"] && components["attributes"]["field"] || false;
437440 var isAudio = template["quick-preview-type"] === "audio";
441+ var asynchronous = isCardTool ? "false" : "true";
438442
439443 if (isAudio) {
440444 // For now we only support audio cards with [optional] art, title, subtitle
@@ -468,7 +472,7 @@ function cardString(template, components, isCardTool) {
468472 backgroundElements1 = '"%1"'.arg(element1);
469473 }
470474 }
471− code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(templateCardBackground);
475+ code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(asynchronous).arg(templateCardBackground);
472476 }
473477
474478 if (hasArt) {
@@ -503,17 +507,24 @@ function cardString(template, components, isCardTool) {
503507 var fallbackURICode = '""';
504508 if (fallback !== "") {
505509 // fallbackStatusCode has %6 in it because we want to substitute it for fallbackURICode
506− // which in kArtShapeHolderCode is %7
507− fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %7;';
510+ // which in kArtShapeHolderCode is %8
511+ fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %8;';
508512 fallbackURICode = 'decodeURI("%1")'.arg(fallback);
509513 }
510− code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode).arg(isConciergeMode ? "false" : "true").arg(aspectRatio).arg(fallbackStatusCode).arg(fallbackURICode);
514+ code += kArtShapeHolderCode.arg(artAnchors)
515+ .arg(widthCode)
516+ .arg(heightCode)
517+ .arg(isConciergeMode ? "false" : "true")
518+ .arg(aspectRatio)
519+ .arg(asynchronous)
520+ .arg(fallbackStatusCode)
521+ .arg(fallbackURICode);
511522 } else {
512523 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
513524 }
514525
515526 if (headerAsOverlay) {
516− code += kOverlayLoaderCode;
527+ code += kOverlayLoaderCode.arg(asynchronous);
517528 }
518529
519530 var headerVerticalAnchors;
@@ -595,7 +606,7 @@ function cardString(template, components, isCardTool) {
595606 }
596607
597608 if (useMascotShape) {
598− mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors);
609+ mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors).arg(asynchronous);
599610 }
600611
601612 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';