Styling Issue with rendering Lightning progress indicator

Question

I have created a lightning web component to render a progress indicator that pulls its stages from a custom metadata type. I have placed this LWC on an experience cloud page. But I am having 2 issues with it.

Problem #1. The first time the page loads, the progress indicator doesn't even show up on the page, but after a refresh it does show up.

Problem #2. The progress indicator is not styled correctly. Although I am setting the current-step to 3 in my HTML template file hard coded, the progress indicator does not show any current/incomplete/complete steps.

My apex method is

public with sharing class ProgressIndicator {

@AuraEnabled(cacheable=true)
public static List<Stages__mdt> getStages() {
    return Stages__mdt.getAll().values();
}

}

Then I have my javascript file with this code

import { LightningElement, wire } from 'lwc';
import getStages from '@salesforce/apex/ProgressIndicator.getStages'

export default class ProgressIndicatorPathTypeWithIteration extends LightningElement {
@wire(getStages) stages ({data, error}) 
{

    if (data)
    {
        console.log(JSON.stringify(data));
        this.stages = data;
        if (error)
            console.log(error);
    }
};

}

and finally my HTML template

    <template>
       <lightning-progress-indicator lwc:if={stages} current-step="3" type="path" variant="base">
          <template for:each={stages} for:item="step">
                <lightning-progress-step  label={step.Order__c} value={step.Order__c} key={step.Order__c}></lightning-progress-step>
          </template>
       </lightning-progress-indicator>
    </template>

Answer 1

Delay rendering the steps until you have data:

<lightning-progress-indicator lwc:if={stages} 
  current-step="3" 
  type="path" 
  variant="base">

In addition, don't use the same name for the wire handler and the property you're trying to show:

stages;
@wire(getStages) wiredStagesHandler({ data, error }) {
  this.stages = data;
}