Flickering in link partial (need help)

[nvh95]

Describe the bug

The link partial gets flickering when visiting https://cv.hung.dev

Reason:

• nuxt/ vue-notion need to recompute inline CSS to layout link partial. So, when JS is loaded, the UI will look as expected

Screenshots

Reproduce

Just visit https://cv.hung.dev

Expected behavior

UI should remain the same with or without Javascript

Additional context

We might need to update the notion content, which is at https://hung.dev/cv (I am not sure how). But I prefer if we can resolve it by code itself

[huyng12]

Take a look at the implementation of Column block here.

You can see that the it is wrapped by Fragment component from vue-fragment which is not support SSR because of its idea. TLDR; It will render a div to wrap elements, then remove them on loaded. So that, DOM structure would be wrong in the first load (aka SSR).

I have an idea to work around that is override their styles to make its visual before/after loaded stay the same.

Check out my PR's changes for the implementation.