Fix: Fixing issue 309, which code block doesn't load all the time

[EddieSCJ]

Fix: Fixing issue 309, which code block doesn't load all the time

Description

Note: Since I'm not a frontend dev and doesn't work with frontend and react there are many years, I might say that something maybe will be incorrect, so, be kind and tell me that I will solve.

Once you reload, the next times the code will be loaded.

Problem

When using the morethan-log I saw that sometimes code blocks are loaded and sometimes it wasn't loaded, and found the #309 issue warning about this started to try solve it.

I also saw that the problem doesn't occur in dev environment, but only when you run:

next build
next start

and in prod when you acces for the first time, to test, you can open some private windows and try access the site: https://morethan-log.vercel.app/apollo-gettings-started-mutate sometimes

Debug approach

First stuff I done was removing the prismjs imports in the notion renderer components to understand if it would work without them. So, they worked and I discovered the origin of the problem.

After this I was thinking for some days about could be happening and decided to try import the highlights out of the promise, I was thinking that the amount of JS files being loaded could be making the highlight lazy since when I was debugging the code appear first without highlight and right after in next breakpoint it disappear.

Solution

So I moved the imports to the root layout, installed prismjs (I previously checked it it was in the package.json and it wasn't there) and imported it according some internet tutorials.

After all, I used prism to code:

  useEffect(() => {
    Prism.highlightAll();
  }, []);

And doing this, It was working all time, so if you can test and assure it, I would be very grateful.

Related tickets

#309

PR Checklist

• I have read the Contributing Guide
• I have written documents and tests, if needed.

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @morethanmin on Vercel.

@morethanmin first needs to authorize it.

[EddieSCJ]

@morethanmin

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
morethan-log	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 26, 2024 4:36pm

[morethanmin]

I apologize for being late. Thank you for your patience!

[EddieSCJ]

I apologize for being late. Thank you for your patience!

No worries.

Its me who need to thank you for creating this template.