[Fixed] multi second load time because of lucide and ipv4 not resolving | Astro Lounge | Page 1

candid grove Jul 23, 2025, 2:02 PM

#

I am currently working on a personal project with astro and am experiencing permanently slow connections.

astro.config.mjs:

// @ts-check
import { defineConfig } from "astro/config";

import svelte from "@astrojs/svelte";
import tailwindcss from "@tailwindcss/vite";
import { paraglideVitePlugin } from "@inlang/paraglide-js";

import node from "@astrojs/node";

// https://astro.build/config
export default defineConfig({
    integrations: [svelte()],
    output: "server",

    vite: {
        plugins: [
            tailwindcss(),
            paraglideVitePlugin({
                project: "./project.inlang",
                outdir: "./src/paraglide",
            }),
        ],
    },

    adapter: node({
        mode: "standalone",
    }),
});

The project currently does not have any middleware.

All my pages suffer from slow connecting, even though it is in localhost, but the dashboard (only page with svelte) also suffers from long wait times.

#

---
import Minimal from "../layouts/Minimal.astro";
import { Plus, List } from "@lucide/astro";
import CreateNotebookModal from "../components/CreateNotebookModal.svelte";
import { m } from "../paraglide/messages.js";
import { getNotebooksByUserId, getLatestDocumentsByUserId } from "../utils/db_queries.js";

const user = await Astro.session?.get("user");
if (!user) {
    return Astro.redirect("/login");
}

const timebefore = new Date();
const notebooks = await getNotebooksByUserId(user);
console.log("Notebooks:", notebooks);
const documents = await getLatestDocumentsByUserId(user);
console.log("Documents:", documents);
const timeafter = new Date();
console.log("Time taken to fetch notebooks and documents:", timeafter - timebefore, "ms");
---

<Minimal>
    <CreateNotebookModal client:load/>
    <div class="w-screen h-screen grid items-center justify-center p-[5%] grid-rows-2 grid-cols-1 gap-10">
        <div class="w-full h-full flex flex-col">
            <div class="flex flex-row justify-between align-middle">
                <h1 class="text-4xl font-bold mb-6">{m.notebooks()}</h1>
                <div class="flex flex-row gap-2">
                    <button class="btn btn-primary w-10 h-10" onclick="create_notebook.showModal()">
                        <Plus size={20} />
                    </button>
                    <button class="btn btn-primary w-10 h-10">
                        <List />
                    </button>
                </div>
            </div>
            <div class="w-full h-full border-2 border-base-200 rounded-lg p-4 gap-4">
                {notebooks.map((notebook) => (
       ))}
            </div>
        </div>
        <div class="w-full h-full flex flex-col">
          <h1 class="text-4xl font-bold mb-6">{m.documents()}</h1>
            <div class="w-full h-full border-2 border-base-200 rounded-lg p-4 gap-4">
                {documents.map((document) => (
     ))}
            </div>
        </div>
    </div>
</Minimal>

#

---
import "../styles/global.css";
const { title } = Astro.props;
export const prerender = false;
---

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{title}</title>
    </head>
    <body>
        <slot />
    </body>
</html>

#

<script lang="ts">
    import { actions } from "astro:actions"
    import { Notebook } from "@lucide/svelte"

    let hue = $state(40)
    let color = $derived(`hsl(${hue}, 100%, 50%)`)
</script>
<dialog id="create_notebook" class="modal" open>
    <div class="modal-box">
        <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <h3 class="font-bold text-lg">Create a new notebook</h3>
        <input
            type="text"
            name="name"
            placeholder="Notebook Name"
            class="input input-bordered w-full mt-4 mb-2"
            required
        />
        <!-- slider for hue -->
        <h4 class="text-sm text-base-content/70 mb-1">Select a color</h4>
        <input type="range" min="0" max="359" class="range range-hue w-full mb-2"
            bind:value={hue} />

        <div class="flex flex-row justify-center align-middle">
            <Notebook class="w-12 h-12 mb-2" color={color} />
        </div>

        <button type="submit" class="btn btn-primary w-full">
            Create Notebook
        </button>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>
<style>
    .range-hue {
        background: linear-gradient(
          to right,
          hsl(0,100%,50%),
          hsl(60,100%,50%),
          hsl(120,100%,50%),
          hsl(180,100%,50%),
          hsl(240,100%,50%),
          hsl(300,100%,50%),
          hsl(360,100%,50%)
        );
        color: transparent;
    }
</style>

fallen stag Jul 23, 2025, 2:32 PM

#

Mm don’t see anything egregious, but any chance you could try an even simpler svelte component in a minimal page just to see if it’s svelte itself that’s making it slow?

candid grove Jul 23, 2025, 2:36 PM

#

It seems to be the lucide icon that is killing the svelte performance

fallen stag Jul 23, 2025, 2:38 PM

#

Astro uses vite dev server which doesn’t bundle anything and it is rendering the page on server before showing in browser (because client:load not client:only)

candid grove Jul 23, 2025, 2:38 PM

#

and lucide for astro too

fallen stag Jul 23, 2025, 2:38 PM

#

Not a solution but just some context haha

#

That’s a bummer to hear I’m not sure what to do

#

Of course you could cut it out of lucide package but that’s a pain

candid grove Jul 23, 2025, 2:39 PM

#

well that explains the "waiting" server time, but I still don't know why it takes 2 seconds to connect to the dev server

#

cause both are on the same machine

candid grove Jul 23, 2025, 2:48 PM

#

candid grove cause both are on the same machine

after testing it out, this fixes itself when running with "--host" (???)

fallen stag Jul 23, 2025, 2:48 PM

#

Mmm very weird

#

What if you go to 127.0.0.1:4321

#

Maybe it’s trying to ipv6

candid grove Jul 23, 2025, 3:00 PM

#

fallen stag What if you go to 127.0.0.1:4321

127.0.0.1 is unable to connect but localhost is

winter echo Jul 23, 2025, 3:01 PM

#

Have you checked your dns settings ?

candid grove Jul 23, 2025, 3:02 PM

#

seems to be some kind of default

winter echo Jul 23, 2025, 3:03 PM

#

https://one.one.one.one/dns/

Maybe try cloudflares? I doubt it. But its worth a shot

1.1.1.1 — One of the Internet’s Fastest, Privacy-First DNS Reso...

✌️✌️ Browse a faster, more private internet.

candid grove Jul 23, 2025, 3:04 PM

#

127.0.0.1 works when doing --host

#

https://ipleak.net/ tells me I have 12 dns servers, all being from my ISP

fallen stag Jul 23, 2025, 3:12 PM

#

It’ll resolve before going through external dns server

I’m over my head already haha but basically I think it’s the interfaces the server is binding to

-host goes to everything and default is just ipv4 I thought but maybe it’s just ipv6

I’m really just guessing but I think you can go to the IPv6 localhost directly with http://[::1]:4321 and if that connects fast I think we’re onto something

#

Are you in Mac/linux by the way? if so have you edited your etc/hosts file at all?

candid grove Jul 23, 2025, 3:13 PM

#

I am on windows

candid grove Jul 23, 2025, 3:14 PM

#

fallen stag It’ll resolve before going through external dns server I’m over my head alread...

yeah [::1] works without host mode but 127.0.0.1 doesn't

candid grove Jul 23, 2025, 3:17 PM

#

fallen stag Are you in Mac/linux by the way? if so have you edited your etc/hosts file at al...

my host file looks like this:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#    127.0.0.1       localhost
#    ::1             localhost
# Added by Docker Desktop
192.169.0.100 host.docker.internal
192.169.0.100 gateway.docker.internal
# To allow the same kube context to work on the host and the container:
127.0.0.1 kubernetes.docker.internal
# End of section

fallen stag Jul 23, 2025, 3:18 PM

#

Ok so I guess it’s binding to the ipv6 and then for browser is trying the ipv4 first then it’s taking a while to timeout then it tries the ipv6

#

I don’t know how to fix this though again sorry lol

candid grove Jul 23, 2025, 3:18 PM

#

yeah that seems to make sense

#

no worries, knowing a way that works is enough

#

I am now gonna look into some vite cache config in the hopes that will just fix the issues with lucide

candid grove Jul 23, 2025, 4:14 PM

#

if anyone else ever has these problems, you have to replace

import { Notebook } from "@lucide/svelte"

with

import Notebook from "@lucide/svelte/icons/notebook"

#

whatever mechanism deals with this seems to struggle with compiling, probably because "@lucide/svelte" exports from like 1000+ files and it needs to find the thing that exports notebook

#

and it seems to be a vite thing because both svelte and astro struggle

#[Fixed] multi second load time because of lucide and ipv4 not resolving