Banner "glitches" on callback

[Schlomoh]

          done @Schlomoh 

Also, when using the component, whenever I hit refresh, the cookie banner comes and goes swifty (as if it glitches). Maybe you can improve it so that after accepting or rejecting, it does not load and show glitches.

Originally posted by @zriyansh in #9 (comment)

[Schlomoh]

@zriyansh, please provide some more information about your setup and implementation. Best to provide a reproducible example.

[zriyansh]

Steps to reporduce
I am using this blog template for my website - https://github.com/timlrx/tailwind-nextjs-starter-blog

Just use the compone that I requested you to add in the app/layout.tsx file.

     ... 
        <ThemeProviders>
          <Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
          <SectionContainer>
            <div className="flex h-screen flex-col justify-between font-sans">
              <SearchProvider>
                <Header />               
                <main className="mb-auto">{children}</main>
              </SearchProvider>
              <Footer />
              
            </div>
          </SectionContainer>
        </ThemeProviders>
        <CookieBanner />
      </body>
      {/* <script>
        <InjectCSS/>
      </script> */}
    </html>
  )
}

system:

1. macOS 13.6.5 M1
2. browser - chrome

sometimes the component load like this before it fully renders.

Full render example:

@Schlomoh

[zriyansh]

this is my component

'use client';

import { CookieBanner } from '@schlomoh/react-cookieconsent';
import React from 'react';
import Link from './Link'

const MyCookieBanner = () => {
    const Content = () => (
        <>
            <h3 className='text-sm'>Life is better with cookies 🍪</h3>
            <p className='text-xs'>This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt out if you wish. <Link href="/cookie" className='text-blue underline'>Cookie Policy</Link></p>
        </>
    )

    const MContent = () => (
        <>
            <h3 className='text-sm'>Manage your cookie settings.</h3>
            <p className='text-xs'>We use cookies and other tracking technologies to improve your experience on our website. We may store and/or access information on a device</p>
        </>
    )
    
    const containerStyle = {backgroundColor: 'white'};
    const buttonStyle = {borderRadius: 10}
    const primaryButtonStyle={...buttonStyle, backgroundColor:'green', fontSize: '12px', padding: '0px' }
    const secondaryButtonStyle={...buttonStyle, backgroundColor:'red', fontSize: '12px', padding: '5px' }
    
  return (
    <CookieBanner
        acceptButtonText='Accept'
        declineButtonText='Reject'
        headingColor='black'
        paragraphColor='grey'
        containerStyle={containerStyle}
        primaryButtonStyle={primaryButtonStyle}
        secondaryButtonStyle={secondaryButtonStyle}
        infoContent={<Content />}
        enableManagement
        managementContent={<MContent />}
        managementButtonText='Preferences'
        cookieCategories={['Analytics', 'Advertisement']}
        // accentColor = 'coral'
    />
  );
};

export default MyCookieBanner;
 

[zriyansh]

Screen.Recording.2024-07-08.at.4.57.41.PM.mov

video of the glitch @Schlomoh