fix canvas bg missing and articles list scroll

src/articles/ArticlesList.tsx

@@ -4,9 +4,9 @@ import {Article, ARTICLES} from "./articles";
 import {motion} from "motion/react";
 import {AnimateFade} from "../animations";
 import {Canvas} from "@react-three/fiber";
-import {Environment, Html, OrbitControls} from "@react-three/drei";
+import {Html, OrbitControls} from "@react-three/drei";
-import MilkyWay from "../img/2k_stars_milky_way.jpg";
 import {Sun} from "../index/Canvas";
+import {Skybox} from "../index/Skybox";
 import {Bloom, EffectComposer, Vignette} from "@react-three/postprocessing";
 import {useEffect, useState} from "react";
 import {Reader} from "./Reader";
@@ -43,7 +43,7 @@ export default function ArticlesList() {
 
   return <motion.main animate={main.animate} initial={main.initial} className="art-ctr">
     <Canvas camera={{position: [0,0,20]}}>
-      <Environment background files={MilkyWay}/>
+      <Skybox/>
       <EffectComposer>
         <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} />
         <Vignette eskil={false} offset={0.1} darkness={1.1} />

src/articles/list.sass

@@ -55,7 +55,7 @@ canvas
 .art-ctr
   display: flex
   flex-direction: row
-  min-height: 100vh
+  flex-grow: 1
 
   ul
     display: flex
@@ -74,4 +74,4 @@ canvas
     &>div
       background: #282c34
     color: white
-    padding: 0
+    padding: 0

src/index/Canvas.tsx

@@ -2,18 +2,18 @@ import "./canvas.sass";
 import {motion} from "framer-motion";
 import {Canvas as ThreeCanvas, useFrame} from "@react-three/fiber";
 import {Moon} from "./Moon";
-import {Environment, Html, OrbitControls, Preload, useTexture} from "@react-three/drei";
+import {Html, OrbitControls, Preload, useTexture} from "@react-three/drei";
 import Jupiter from "../img/2k_jupiter.webp";
 import Makemake from "../img/2k_makemake_fictional.webp";
 import Ceres from "../img/2k_ceres_fictional.webp";
 import Haumea from "../img/2k_haumea_fictional.webp";
-import MilkyWay from "../img/2k_stars_milky_way.jpg";
 import SaturnRings from "../img/12k_jupiter_rings.webp";
 import {useRef} from "react";
 import type {Mesh} from "three";
 import {Bloom, EffectComposer, Vignette} from "@react-three/postprocessing";
+import {Skybox} from "./Skybox";
 
-useTexture.preload([Jupiter, Makemake, Ceres, Haumea, MilkyWay, SaturnRings]);
+useTexture.preload([Jupiter, Makemake, Ceres, Haumea, SaturnRings]);
 
 export default function Canvas() {
   // fade animation sync with loading
@@ -26,7 +26,7 @@ export default function Canvas() {
             <Vignette eskil={false} offset={0.1} darkness={1.1} />
           </EffectComposer>
           <OrbitControls enablePan={false} enableZoom={false} />
-          <Environment background files={MilkyWay}/>
+          <Skybox/>
           <Sun/>
           <Moons/>
           <Planet/>
@@ -83,4 +83,4 @@ function Planet() {
     <sphereGeometry args={[1, 32, 32]} />
     <meshPhysicalMaterial map={colorMap} color="orange" iridescence={1} />
   </mesh>
-}
+}

src/index/Skybox.tsx

@@ -0,0 +1,18 @@
+import {useEnvironment, Environment, useTexture} from "@react-three/drei";
+import {useEffect} from "react";
+import MilkyWay from "../img/2k_stars_milky_way.jpg";
+
+useTexture.preload(MilkyWay);
+
+// fixes skybox missing during page redirects by clearing cache
+export function Skybox() {
+  const envTexture = useEnvironment({ files: MilkyWay });
+
+  // 2. Force the GPU to re-upload the cached Javascript object
+  useEffect(() => {
+    return () => useEnvironment.clear({files: MilkyWay});
+  }, [envTexture]);
+
+  return <Environment background map={envTexture}/>
+}
+