@fluid-topics/ft-reader-title 1.2.35 → 1.2.37

package/build/ft-reader-title.d.ts

@@ -6,6 +6,7 @@ export declare class FtReaderTitle extends FtReaderComponent implements FtReader
     static elementDefinitions: ElementDefinitionsMap;
     static styles: import("lit").CSSResult;
     private mapTitle?;
+    private translationLoading?;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
     protected contentAvailableCallback(props: PropertyValues): void;
 }

package/build/ft-reader-title.js

@@ -8,11 +8,16 @@ import { css, html, nothing } from "lit";
 import { redux } from "@fluid-topics/ft-wc-utils";
 import { FtReaderComponent } from "@fluid-topics/ft-reader-context/build/registration";
 import { FtTypography } from "@fluid-topics/ft-typography";
+import { FtSkeleton } from "@fluid-topics/ft-skeleton";
 class FtReaderTitle extends FtReaderComponent {
     render() {
-        return this.mapTitle ? html `
-            <ft-typography variant="title" part="title" element="h1">${this.mapTitle}</ft-typography>
-        ` : nothing;
+        return this.translationLoading
+            ? html `
+                <ft-skeleton></ft-skeleton>`
+            : this.mapTitle
+                ? html `
+                    <ft-typography variant="title" part="title" element="h1">${this.mapTitle}</ft-typography>`
+                : nothing;
     }
     contentAvailableCallback(props) {
         super.contentAvailableCallback(props);
@@ -23,14 +28,22 @@ class FtReaderTitle extends FtReaderComponent {
 }
 FtReaderTitle.elementDefinitions = {
     "ft-typography": FtTypography,
+    "ft-skeleton": FtSkeleton
 };
 //language=css
 FtReaderTitle.styles = css `
         [part="title"]::part(text) {
             margin: unset;
         }
+
+        ft-skeleton {
+            height: var(--ft-typography-title-font-size);
+        }
     `;
 __decorate([
     redux({ selector: (s) => { var _a; return (_a = s.map) === null || _a === void 0 ? void 0 : _a.title; } })
 ], FtReaderTitle.prototype, "mapTitle", void 0);
+__decorate([
+    redux({ selector: (s) => s.translation.isLoading })
+], FtReaderTitle.prototype, "translationLoading", void 0);
 export { FtReaderTitle };