How can I remove the occasional black flash I get when loading pages in pug?

I’m having a hard time troubleshooting what’s causing these black flashes before the page loads. This only happens one in every few times I load a page. I tried changing the background color of my HTML and Body elements inline to see if the new color appeared but it always shows black. Any way to figure out what’s causing this?

base.pug

doctype html
html
  head
    block head
      meta(charset="UTF-8")
      meta(name="viewport", content="width=device-width, initial-scale=1.0")

      title Save Melee | #{ title }
      link(rel="stylesheet", href="/css/style.css")
      link(rel="shortcut icon", type="/image/webp", href="/img/savelogo.png")
      link(
        href="https://fonts.googleapis.com/css?family=Lato:300,300i,700",
        rel="stylesheet"
      )

    body 
      include icons  
    
      //Header
      include _header

      //Content
      block content

      //Footer
      include _footer

      .mobile__page
        h2.mobile__message Mobile view under construction
        .loader <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path fill="#FFF" stroke="#FFF" stroke-width="12" transform-origin="center" d="m148 84.7 13.8-8-10-17.3-13.8 8a50 50 0 0 0-27.4-15.9v-16h-20v16A50 50 0 0 0 63 67.4l-13.8-8-10 17.3 13.8 8a50 50 0 0 0 0 31.7l-13.8 8 10 17.3 13.8-8a50 50 0 0 0 27.5 15.9v16h20v-16a50 50 0 0 0 27.4-15.9l13.8 8 10-17.3-13.8-8a50 50 0 0 0 0-31.7Zm-47.5 50.8a35 35 0 1 1 0-70 35 35 0 0 1 0 70Z"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="0;120" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></path></svg>
script(src="/js/bundle.js", type="module")
script(src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js")
script(
  src="https://cdnjs.cloudflare.com/ajax/libs/js-polyfills/0.1.43/polyfill.min.js"
)

app.js

(...imports...)
app.set("view engine", "pug");
app.set("views", path.join(__dirname, "views"));
app.use(express.static(path.join(__dirname, "public")));

if (process.env.NODE_ENV === "production") {
  app.use((req, res, next) => {
    if (req.header("x-forwarded-proto") !== "https")
      res.redirect(`https://${req.header("host")}${req.url}`);
    else next();
  });
}
//Set security HTTP headers
app.use(
  helmet({
    contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'", "data:", "blob:", "https:", "ws:"],
        baseUri: ["'self'"],
        fontSrc: ["'self'", "https:", "data:"],
        scriptSrc: ["'self'", "https:", "http:", "blob:", "'unsafe-inline'"],
        frameSrc: ["'self'"],
        objectSrc: ["'none'"],
        styleSrc: ["'self'", "https:", "'unsafe-inline'"],
        workerSrc: ["'self'", "data:", "blob:"],
        childSrc: ["'self'", "blob:"],
        imgSrc: ["'self'", "data:", "blob:"],
        formAction: ["'self'", "https://formspree.io"],
        connectSrc: [
          "'self'",
          "'unsafe-inline'",
          "data:",
          "blob:",
          "https://formspree.io",
        ],
        upgradeInsecureRequests: [],
      },
    },
  })
);


// Limit requests from same IP
const limiter = rateLimit({
  max: 1000,
  windowMs: 60 * 60 * 1000,
  message: "Too many requests from this IP, please try again in an hour",
});
app.use("/api", limiter);

// Body parser, reading data from body into req.body
app.use(express.json({ limit: "50kb" }));
app.use(cookieParser());

// Data sanitization against NoSQL query injection
app.use(mongoSanitize());

// Data sanitization against XSS
app.use(xss());
app.use(compression());

//ROUTES
app.use("/", viewRouter);
app.use("/api/v1/users", userRouter);
app.use("/api/v1/reviews", reviewRouter);
app.use("/api/v1/savestates", savestateRouter);

app.all("*", (req, res, next) => {
  next(new AppError(`Can't find ${req.originalUrl} on this server!`, 404));
});

app.use(globalErrorHandler);
module.exports = app;