Sivasish48: Issue #39287 Replacing the "show" method with a modified and Introduced a small delay before triggering the 'Offcanvas'

[Sivasish48]

Description

Modifying the 'show' method with the 'Offcanvas' class and creating a small delay with 'setTimeOut' before triggering the Offcanvas

Motivation & Context

These changes are intended to make the transition work more reliably in various browsers, including Chrome.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-{your_pr_number}--twbs-bootstrap.netlify.app/

Related issues

[louismaximepiton]

The indents aren't correct, some new breaklines aren't needed. please take a look at our contributing guidelines.
We won't review it for now.

[louismaximepiton]

This feels wrong, every offcanvas isn't an offcanvas-end.

[Sivasish48]

My pardon.

show(relatedTarget) {
    if (this._isShown) {
        return;
    }

    const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget });

    if (showEvent.defaultPrevented) {
        return;
    }

    this._isShown = true;

    // Adding the class 'offcanvas-end' here
    this._backdrop.show();

    if (!this._config.scroll) {
        new ScrollBarHelper().hide();
    }

    this._element.setAttribute('aria-modal', true);
    this._element.setAttribute('role', 'dialog');
    this._element.classList.add(CLASS_NAME_SHOWING);

    const completeCallBack = () => {
        if (!this._config.scroll || this._config.backdrop) {
            this._focustrap.activate();
        }

        this._element.classList.add(CLASS_NAME_SHOW);
        this._element.classList.remove(CLASS_NAME_SHOWING);
        EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget });
    };

    // Introduce a small delay before triggering the Offcanvas
    setTimeout(completeCallBack, 50); // Adjust the delay as needed
}    

Please suggest what should be done!