[SalesForce] Progress indicator is not working in LWC

You used value instead of checked in body checkboxes.

    <td>
            <lightning-input type="checkbox" variant="label-hidden" 
                  checked={lineItem.includedInAutomatedSupplies}
                  data-key={lineItem.lineItemId} label="dataCheckbox" onchange={dataChekChange}>
            </lightning-input>
    </td>

Improvement:

It is better to use javascript function map instead of forEach because forEach modifies existing array and map will return new array.

headerCheckoxChanged(event) {
    this.lineItemData = this.lineItemData.map(element => {
        element.includedInAutomatedSupplies = event.target.checked;
        return element;
    });
    console.log(JSON.stringify(this.lineItemData));
}

The only reason spinner may not be showing up is because your javascript calculations (like this counting code) before switching page is taking 3-4 seconds. You need to check for such calculations.

Regarding the best practices, whether its 3 pages or 10 pages, what you are trying to implement is known as wizard and you can keep the code simple, maintainable and uniform by having only 2 buttons in the container page html and relevant JS. Below is the sample container code: (Playground Link)

<div>
    <div>
        <template if:true={show1Step}>
            <c-parent full-data={fullData}></c-parent>
        </template>
        <template if:true={show2Step}>
            <c-child full-data={fullData}></c-child>
        </template>
        <template if:true={show3Step}>
            <c-grandchild full-data={fullData}></c-grandchild>
        </template>
    </div>

    <!-- BUTTONS -->
    <template if:false={show1Step}>
        <lightning-button label={prevLabel} 
                            class="slds-float_left"
                            onclick={prevPage}>
        </lightning-button>
    </template>
    <template if:false={show3Step}>
        <lightning-button label={nextLabel} 
                            class="slds-float_right"
                            onclick={nextPage}>
        </lightning-button>
    </template>
</div>

JS:

export default class App extends LightningElement {
    @track fullData;
    @track step = 1;

    nextPage = () => this.step++;
    prevPage = () => this.step--;

    get show1Step() { return this.step === 1; }
    get show2Step() { return this.step === 2; }
    get show3Step() { return this.step === 3; }

    get nextLabel() {
        if (this.show1Step) return 'Go To Child';
        else if (this.show2Step) return 'Go To Grand Child';
        else return 'Next';
    }
    get prevLabel() {
        if (this.show2Step) return 'Go To Parent';
        else if (this.show3Step) return 'Go To Child';
        else return 'Previous';
    }
}

added

In LWC you cannot change the data passed in api variables - so you cannot change the data in child components. You need to send the changed data in event to container component which will take care of modifying the fullData which will in-turn reflect in all child components and thus showing the latest data in all child components.

Here is the reference

A component that declares a public property can set only its default value. A parent component that uses the component in its markup can set the component’s public property value. In our example, the c-todo-item component can’t update the value of the itemName property in the todoItem.js file.