Gatsby css slow loading times in production

Question

I have a question for you... I am making a documentation website with Mantine, MDX and Gatsby. But I have a problem, when I build my app and do yarn serve, my css loads slower than the rest of my page. It has a delay.

I have installed gatsby-plugin-mantine, which didnt solve the issue. After that I tried to use the gatsby-ssr.js file.

Which didn't fix it either

// gatsby-ssr.js
/* eslint-disable react/jsx-filename-extension */
import React from "react";
import { renderToString } from "react-dom/server";
import { createStylesServer, ServerStyles } from "@mantine/ssr";

const stylesServer = createStylesServer();

export const replaceRenderer = ({
  bodyComponent,
  replaceBodyHTMLString,
  setHeadComponents,
}) => {
  const html = renderToString(bodyComponent);
  setHeadComponents([
    <ServerStyles html={html} server={stylesServer} key="mantine-styles" />,
  ]);
  replaceBodyHTMLString(html);
};

export const onRenderBody = ({ setHtmlAttributes }) => {
  setHtmlAttributes({ lang: "en" });
};

Any fix? I am using "@mantine/core": "^6.0.11", "gatsby": "^5.10.0",

Gatsby css slow loading times in production

0 Answers0