Lightning progress indicator does not render correctly

Question

I'm creating a custom path for the Case Status field to use in a Community page. The Status values are dynamically populated since different Record Types have different Statuses. My problem is that compared to the standard path component my custom one is not rendering correctly.

the top one is the standard one, the bottom one my custom. As you can see the current status is selected with the outline only, just like it would be if you select another status on the path. Do you know how to force it to render correctly?

If I use a console.log at the end of get currentStep() I see that the current status is undefined at first and then the function runs a second time and finds the correct status. I think it may have something to do with it but I can't find a solution.

HTML

<template>
    <lightning-card>
        <div class="slds-m-around_medium slds-readonly-path">
            <lightning-progress-indicator record-id={recordId} current-step={currentStep} type="path">
                <template for:each={steps} for:item="step">
                    <lightning-progress-step label={step.label} value={step.value} key={step.label}></lightning-progress-step>
                </template>
            </lightning-progress-indicator>
        </div>
    </lightning-card>
</template>

JS

import { LightningElement, api, wire } from "lwc";
import { getRecord } from "lightning/uiRecordApi";

import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import CASE_STATUS_FIELD from '@salesforce/schema/Case.Status';

const FIELDS = ["Case.Status", "Case.RecordTypeId"];
export default class CustomPath extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: "$recordId", fields: FIELDS })
    case;

    caseStatusPicklistValues;
    steps = [];

    @wire(getPicklistValues, {
        recordTypeId: '$case.data.fields.RecordTypeId.value',
        fieldApiName: CASE_STATUS_FIELD
    })
    wiredPicklistValues({ error, data }) {
        if (data) {
            this.caseStatusPicklistValues = data.values.map((picklistValue, index) => {
                return {
                    label: picklistValue.label,
                    value: 'step-' + (index + 1)
                };
            });
            this.steps = this.caseStatusPicklistValues;
        }
    }

    get currentStep() {
        if (this.case.data) {
            const statusValue = this.case.data.fields.Status.value;
            const step = this.steps.find(step => step.label === statusValue);
            return step ? step.value : null;
        }
    }
}

EDIT after @tushar-jadav response:

I used the modified code provided in the answer and changed the getter for currentStep to this:

    get currentStep() {
        if (this.caseStatusPicklistValues) {
            const statusValue = this.case.data.fields.Status.value;
            const step = this.caseStatusPicklistValues.find(step => step.label === statusValue);
            return step ? step.value : null;
        }
    }

It's now working as intended.

Answer 1

This happened because of the component loaded in DOM and your data is not available to set the current step.

In your js file, I have created on variable to indicate whether the data is available or not. based on this variable render your component in html. I have also updated the currentStep getter method.

HTML::

<template>
        <template lwc:if={dataAvailable}>
                <lightning-card>
                        <div class="slds-m-around_medium slds-readonly-path">
                                <lightning-progress-indicator record-id={recordId} current-step={currentStep} type="path">
                                        <template for:each={steps} for:item="step">
                                                <lightning-progress-step label={step.label} value={step.value} key={step.label}>
                                                </lightning-progress-step>
                                        </template>
                                </lightning-progress-indicator>
                        </div>
                </lightning-card>
        </template>
</template>

JS::

import { LightningElement, api, wire } from "lwc";
import { getRecord } from "lightning/uiRecordApi";

import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import CASE_STATUS_FIELD from '@salesforce/schema/Case.Status';

const FIELDS = ["Case.Status", "Case.RecordTypeId"];
export default class CustomPath extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: "$recordId", fields: FIELDS })
    case;

    caseStatusPicklistValues;
    steps = [];
    dataAvailable = false;//add this variable

    @wire(getPicklistValues, {
        recordTypeId: '$case.data.fields.RecordTypeId.value',
        fieldApiName: CASE_STATUS_FIELD
    })
    wiredPicklistValues({ error, data }) {
        if (data) {
            this.caseStatusPicklistValues = data.values.map((picklistValue, index) => {
                return {
                    label: picklistValue.label,
                    value: 'step-' + (index + 1)
                };
            });
            this.steps = this.caseStatusPicklistValues;
            this.dataAvailable = true; // make variable true
        }
    }

    get currentStep() {// updated the current step method
        if (this.caseStatusPicklistValues) {
            return this.caseStatusPicklistValues[0].value;
        }
    }
}

Output::