ambitious-aqua•12mo ago

Hard refresh is ugly

Hard refreshing the page shows a very unformatted page until it loads. Is there any way to prevent this? Using tailwindcss and nextjs13 with antd

2 Replies

kapa.ai•12mo ago

Hi @synisme. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This issue might be related to the way Next.js and Ant Design are configured in your project. It's possible that the styles are not being properly applied during server-side rendering, which could cause a flash of unstyled content when the page is hard refreshed. One possible solution could be to follow the instructions provided in the Ant Design documentation on how to use it with Next.js. You can find the relevant guide here (https://ant.design/docs/react/use-with-next#using-pages-router). Additionally, you might want to check your _app.tsx file and ensure that it's properly set up. Here's an example of how it could look like:

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router";
import dataProvider from "@refinedev/simple-rest";
import type { AppProps } from "next/app";

import { RefineThemes, ThemedLayoutV2, useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp, ConfigProvider } from "antd";

import "@refinedev/antd/dist/reset.css";

function App({ Component, pageProps }: AppProps) {
    return (
        <ConfigProvider theme={RefineThemes.Blue}>
            <AntdApp>
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
                    notificationProvider={useNotificationProvider}
                    resources={[
                        {
                        name: "products",
                        list: "/products",
                        },
                    ]}
                >
                  <ThemedLayoutV2>
                    <Component {...pageProps} />
                  </ThemedLayoutV2>
                </Refine>
            </AntdApp>
        </ConfigProvider>
    );
}
export default App;

import { Refine } from "@refinedev/core";
import routerProvider from "@refinedev/nextjs-router";
import dataProvider from "@refinedev/simple-rest";
import type { AppProps } from "next/app";

import { RefineThemes, ThemedLayoutV2, useNotificationProvider } from "@refinedev/antd";
import { App as AntdApp, ConfigProvider } from "antd";

import "@refinedev/antd/dist/reset.css";

function App({ Component, pageProps }: AppProps) {
    return (
        <ConfigProvider theme={RefineThemes.Blue}>
            <AntdApp>
                <Refine
                    routerProvider={routerProvider}
                    dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}
                    notificationProvider={useNotificationProvider}
                    resources={[
                        {
                        name: "products",
                        list: "/products",
                        },
                    ]}
                >
                  <ThemedLayoutV2>
                    <Component {...pageProps} />
                  </ThemedLayoutV2>
                </Refine>
            </AntdApp>
        </ConfigProvider>
    );
}
export default App;

(Source: Refine Documentation (https://refine.dev/docs/ui-integrations/ant-design/introduction#predefined-components-and-views)) Please note that this is just a general guide and you might need to adjust the code to fit your specific needs. If the issue persists, it might be a good idea to ask for help in the Refine Discord community (https://discord.com/channels/837692625737613362/1164544118932906065) or open an issue in the Refine GitHub repository (https://github.com/refinedev/refine/issues). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•12mo ago

<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below