NextJs & Mantine UI Component Rendering Delay

mcamendoza1 commented 2 years ago

What package has an issue

@mantine/core

Describe the bug

Current my application uses '@mantine/core' and nextjs. When refreshing the index.js / home page, I've notice the un-styled components first, is there a way to avoid that? for me it seems loading on UX

import {
  createStyles,
  Container,
  Text,
  Button,
  Group,
} from '@mantine/core'

const BREAKPOINT = '@media (max-width: 755px)'

const useStyles = createStyles((theme) => ({
  wrapper: {
    position: 'relative',
    boxSizing: 'border-box',
    backgroundColor: 'white'
      // theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
  },

  inner: {
    position: 'relative',
    paddingTop: 120,
    paddingBottom: 120,

    [BREAKPOINT]: {
      paddingBottom: 80,
      paddingTop: 80,
    },
  },

  title: {
    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
    fontSize: 62,
    fontWeight: 900,
    lineHeight: 1.1,
    margin: 0,
    padding: 0,
    color: theme.colorScheme === 'dark' ? theme.white : theme.black,

    [BREAKPOINT]: {
      fontSize: 42,
      lineHeight: 1.2,
    },
  },

  description: {
    marginTop: theme.spacing.xl,
    fontSize: 24,

    [BREAKPOINT]: {
      fontSize: 18,
    },
  },

  controls: {
    marginTop: theme.spacing.xl * 2,

    [BREAKPOINT]: {
      marginTop: theme.spacing.xl,
    },
  },

  control: {
    height: 54,
    paddingLeft: 38,
    paddingRight: 38,

    [BREAKPOINT]: {
      height: 54,
      paddingLeft: 18,
      paddingRight: 18,
      flex: 1,
    },
  },

  githubControl: {
    borderWidth: 2,
    borderColor:
      theme.colorScheme === 'dark' ? 'transparent' : theme.colors.dark[9],
    backgroundColor:
      theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'transparent',

    '&:hover': {
      backgroundColor: `${
        theme.colorScheme === 'dark'
          ? theme.colors.dark[6]
          : theme.colors.gray[0]
      } !important`,
    },
  },
}))

export default function HomeHero() {
  const { classes } = useStyles()

  return (
    <div className={classes.wrapper}>
      <Container size={700} className={classes.inner}>
        <h1 className={classes.title}>
          Welcome to <br />
          <Text
            component='span'
            variant='gradient'
            gradient={{ from: 'blue', to: 'cyan' }}
            inherit
          >
            Service Zero
          </Text>
        </h1>

        <Text className={classes.description} color='dimmed'>
          A field service management software that helps you manage all the
          resources used in your filed service activities.
        </Text>

        <Group className={classes.controls}>
          <Button
            component='a'
            href='/auth/signin'
            size='xl'
            className={classes.control}
            variant='outline'
            color='dark'
          >
            Sign In
          </Button>

          {/* <Button
            component='a'
            href='https://github.com/mantinedev/mantine'
            size='xl'
            variant='outline'
            className={cx(classes.control, classes.githubControl)}
            color={theme.colorScheme === 'dark' ? 'gray' : 'dark'}
          >
            GitHub
          </Button> */}
        </Group>
      </Container>
    </div>
  )
}

import '../styles/globals.css'
import Head from 'next/head'
import { MantineProvider } from '@mantine/core'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Service Zero</title>
        <meta
          name='viewport'
          content='minimum-scale=1, initial-scale=1, width=device-width'
        />
      </Head>
      <MantineProvider
        theme={{ colorScheme: 'light' }}
        withGlobalStyles
        withNormalizeCSS
      >
        <Component {...pageProps} />
      </MantineProvider>
    </>
  )
}

export default MyApp

In which browser did the problem occur

Chrome, Firebox

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

drj17 commented 2 years ago

Did you follow the steps outlined here?

mcamendoza1 commented 2 years ago

Did you follow the steps outlined here?

yes, i did follow it.

import '../styles/globals.css'
import Head from 'next/head'
import { MantineProvider } from '@mantine/core'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        <title>Service Zero</title>
        <meta
          name='viewport'
          content='minimum-scale=1, initial-scale=1, width=device-width'
        />
      </Head>
      <MantineProvider
        theme={{ colorScheme: 'light' }}
        withGlobalStyles
        withNormalizeCSS
      >
        <Component {...pageProps} />
      </MantineProvider>
    </>
  )
}

export default MyApp

rtivital commented 2 years ago

Duplicate of #1214, see possible solutions in that issue

mcamendoza1 commented 2 years ago

@rtivital

I did follow pattern.

import { createGetInitialProps } from '@mantine/next'
import Document from 'next/document'

const getInitialProps = createGetInitialProps()

export default class _Document extends Document {
  static getInitialProps = getInitialProps
}

rtivital commented 2 years ago

See my comment in #1214, I cannot provide any other assistance with resolving these kind of issues

mantinedev / mantine