-
Notifications
You must be signed in to change notification settings - Fork 57
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
NextJS 14 Flicker CSS Issue #157
Comments
I meet the same problem too. The flicker css still happens when i use next@14.0.1 but it works well after i downgrade to next@13.5.6. |
I managed to reproduce here https://github.com/jknap/antd-demo/tree/main
It works the first time. It seems that the cache returned by |
Ok I found the issue, it was due to a mismatch between the @ant-design/cssinjs version and the one that antd depends on. Fo reference => ant-design/ant-design#45567 |
Actually, the flicker still valid when streaming html 'use client';
import { useRef, useState } from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
export function AntdRegistry({ children }: React.PropsWithChildren) {
const [cache] = useState(() => createCache());
const alreadyInserted = useRef(new Set<string>());
useServerInsertedHTML(() => {
if (cache.cache.size === 0) {
return;
}
for (const key of alreadyInserted.current.keys()) {
cache.cache.delete(key);
}
const html = extractStyle(cache, true);
for (const key of cache.cache.keys()) {
alreadyInserted.current.add(key);
}
cache.cache.clear();
return <style dangerouslySetInnerHTML={{ __html: html }} className='antd' />;
});
return (
<StyleProvider cache={cache} hashPriority='high'>
{children}
</StyleProvider>
);
} But i am not aware if relying on cache keys is fine in all the edge cases |
I also created a bug with reproduction in the antd repo, so let me link in here just in case: |
This solved mine! |
Same issue here, using:
EDIT: I used "@ant-design/cssinjs": "1.17.5" and it worked. |
Yes you need to run |
This is driving me nuts, I've tried all the solutions mentioned above and still the antd styles are not pre-rendering. I inspect the content created by
It seems the I have no idea what else to try. My cssinjs version numbers match. |
@Stuart88 Did you find a solution? |
Nope, I chose to ignore it. In my case, the app loads fast enough for the css loading flicker to not be too much of a problem. |
I think the library need to adapt NextJS 14.
The flicker still happening after implementing this guide from antd design documentation. When I tried to downgrade to NextJS 13, it works. The flicker css only happens on NextJS 14.
The text was updated successfully, but these errors were encountered: