How can I achieve smoother page transitions? Or add a loading animation while a page loads?

Site URL: https://butterfly-fox-sw8m.squarespace.com/

PW to access site is DivineTiming

When I switch between pages, there is a flash of white. I am looking to eliminate or "hide" this flash of white with either an animated loading image, or somehow achieve a smoother transition between pages. 

An example of page transitions I like is -- http://www.dreamville.com/

Any help on this would be greatly appreciated. Thank you!

-Juan

I was having this issue on page load/page switch. The pages displayed in full for a ms before doing the fade-in site wide animation.

This is what I used to fix it (add to custom css section in settings)

body:not([data-animation-state="booted"]) > * {
  opacity: 0;
}

This waits for the 'data-animation-state' attribute to be added to body before showing any elements, essentially skipping the full display that happens before the animations are queued

Hope this helps!