Bookmark state is not applied correctly on load

Hi,

I am using the most recent version of the powerbi-client (2.18.0) and I am encountering the following issue:

When you specify a bookmark state in the embed configuration, the bookmark state is not applied correctly.  Certain visuals are sliced correctly.

When you apply the same bookmark state after the report has rendered, the state is correcty applied.

The issue can be reproduced easily on the Power BI embedded playground with the following PBIX (https://bizzcontrol-public.s3.eu-central-1.amazonaws.com/report_429.pbix) and the following snippets:

Apply bookmark state on load.

let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
    // Read embed application token
    let accessToken = EMBED_ACCESS_TOKEN;

    // Read embed URL
    let embedUrl = EMBED_URL;

    // Read report Id
    let embedReportId = REPORT_ID;

    // Read embed type from radio
    let tokenType = TOKEN_TYPE;

    // We give All permissions to demonstrate switching between View and Edit mode and saving report.
    let permissions = models.Permissions.All;

    // Create the embed configuration object for the report
    // For more information see https://go.microsoft.com/fwlink/?linkid=2153590
    let config = {
        type: 'report',
        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: permissions,
        settings: {
            panes: {
                filters: {
                    visible: true
                },
                pageNavigation: {
                    visible: true
                }
            },
        },
        bookmark: {
            state: "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"
        } 
    };

    // Get a reference to the embedded report HTML element
    let embedContainer = $('#embedContainer')[0];

    // Embed the report and display it within the div container.
    report = powerbi.embed(embedContainer, config);

    // report.off removes all event handlers for a specific event
    report.off("loaded");

    // report.on will add an event handler
    report.on("loaded", function () {
        loadedResolve();
        report.off("loaded");
    });

    // report.off removes all event handlers for a specific event
    report.off("error");

    report.on("error", function (event) {
        console.log(event.detail);
    });

    // report.off removes all event handlers for a specific event
    report.off("rendered");

    // report.on will add an event handler
    report.on("rendered", function () {
        renderedResolve();
        report.off("rendered");
    });
}

embedPowerBIReport();
await reportLoaded;

// Insert here the code you want to run after the report is loaded

await reportRendered;

// Insert here the code you want to run after the report is rendered

Apply state after render:

let loadedResolve, reportLoaded = new Promise((res, rej) => { loadedResolve = res; });
let renderedResolve, reportRendered = new Promise((res, rej) => { renderedResolve = res; });

// Get models. models contains enums that can be used.
models = window['powerbi-client'].models;

// Embed a Power BI report in the given HTML element with the given configurations
// Read more about how to embed a Power BI report in your application here: https://go.microsoft.com/fwlink/?linkid=2153590
function embedPowerBIReport() {
    // Read embed application token
    let accessToken = EMBED_ACCESS_TOKEN;

    // Read embed URL
    let embedUrl = EMBED_URL;

    // Read report Id
    let embedReportId = REPORT_ID;

    // Read embed type from radio
    let tokenType = TOKEN_TYPE;

    // We give All permissions to demonstrate switching between View and Edit mode and saving report.
    let permissions = models.Permissions.All;

    // Create the embed configuration object for the report
    // For more information see https://go.microsoft.com/fwlink/?linkid=2153590
    let config = {
        type: 'report',
        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: accessToken,
        embedUrl: embedUrl,
        id: embedReportId,
        permissions: permissions,
        settings: {
            panes: {
                filters: {
                    visible: true
                },
                pageNavigation: {
                    visible: true
                }
            },
        },
    };

    // Get a reference to the embedded report HTML element
    let embedContainer = $('#embedContainer')[0];

    // Embed the report and display it within the div container.
    report = powerbi.embed(embedContainer, config);

    // report.off removes all event handlers for a specific event
    report.off("loaded");

    // report.on will add an event handler
    report.on("loaded", function () {
        loadedResolve();
        report.off("loaded");
    });

    // report.off removes all event handlers for a specific event
    report.off("error");

    report.on("error", function (event) {
        console.log(event.detail);
    });

    // report.off removes all event handlers for a specific event
    report.off("rendered");

    // report.on will add an event handler
    report.on("rendered", function () {
        report.bookmarksManager.applyState("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");
        renderedResolve();
        report.off("rendered");
    });
}

embedPowerBIReport();
await reportLoaded;

// Insert here the code you want to run after the report is loaded

await reportRendered;

// Insert here the code you want to run after the report is rendered