MDBSideNav - flickering on page load


Topic: MDBSideNav - flickering on page load

beeweb asked 2 years ago

Hi,

We are having problems with MDBSideNav component on our website (https://www.noleggiosemplice.it/noleggio-lungo-termine/bmw) . When page loads, the blue side bar on the left opens and closes very quickly even though the component has atribute triggerOpening={this.state.toggleStateA} (we double checked, the property value is always false on pageload) . This is not a desired functionality. We want the page load without sidebar flickering and open only when the user clicks on the 'burger' icon in the left top corner of a page. It is important to note, that we use the same file where this component exists in all of our pages in this website, however for this specific path the sidebar flickers (in other paths it seems to be working as desired). How could we make the sidebar open only when the user clicks and without flickering on the page load? We use NextJS for server side rendering of our page.

Below is the code snippet of how this component is built on our side:

`

                <MDBSideNavNav>
                    <a className="sidebar-link aziende" href="/noleggio-lungo-termine">
                        <li> <img src="/static/images/aziende-white.svg" /> AZIENDE</li>
                    </a>

                    <a className="sidebar-link privati" href="/privati">
                        <li> <img src="/static/images/privati-white.svg" /> PRIVATI</li>
                    </a>

                    <a href="/cose-il-noleggio-a-lungo-termine"><li>COS'È IL NOLEGGIO A LUNGO TERMINE</li></a>
                    <Link href="/marchi"><a><li>MARCHI AUTO</li></a></Link>
                    <Link href="/vantaggi"><a><li>VANTAGGI</li></a></Link>
                    <Link href="/fiscalita"><a><li>FISCALITÀ</li></a></Link>
                    <Link href="/servizi"><a><li>SERVIZI</li></a></Link>
                    <Link href="/franchising"><a><li>FRANCHISING</li></a></Link>
                    <Link href="/faq"><a><li>FAQ</li></a></Link>
                    <Link href="/company-profile"><a><li>COMPANY PROFILE</li></a></Link>
                    <Link href="/blog"><a target="_top"><li>BLOG</li></a></Link>
                    <Link href="/contatti"><a><li>CONTATTI</li></a></Link>
                </MDBSideNavNav>
            </MDBSideNav>`

Thank you in advance for your feedback!


Piotr Glejzer staff commented 2 years ago

Is still this problem exist? I don't see any flickering elements on the page load :(


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.22.1
  • Device: Laptop, tablet, smartphone
  • Browser: Google Chrome (all browsers)
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes