Smoothed out tab transition and removed unused vars (#7)

src/ProgressPane.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from "react"
 import { createPortal } from "react-dom"
-import { Area, XAxis, YAxis, AreaChart, CartesianGrid, Tooltip, ResponsiveContainer, Text } from "recharts"
+import { Area, XAxis, YAxis, AreaChart, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
 
 const csvVersions = {
     "1": {
@@ -47,7 +47,7 @@ async function fetchData(version) {
     return rows
 }
 
-export default function ProgressPane({ captionPortal, nonce, color, version }) {
+export default function ProgressPane({ captionPortal, color, version }) {
     const [data, setData] = useState()
     const [dataVersion, setDataVersion] = useState()
 
@@ -62,11 +62,11 @@ export default function ProgressPane({ captionPortal, nonce, color, version }) {
     const isDataValid = dataVersion === version
 
     return <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
-        {<DataView data={isDataValid ? data : []} nonce={nonce} captionPortal={captionPortal} color={color}/>}
+        {data && <DataView data={isDataValid ? data : []} captionPortal={captionPortal} color={color}/>}
     </div>
 }
 
-function DataView({ data, captionPortal, nonce, color }) {
+function DataView({ data, captionPortal, color }) {
     const latest = data[data.length - 1]
     const oldest = data[0]
     const { stroke, fill } = colors[color]
@@ -148,7 +148,7 @@ function DataView({ data, captionPortal, nonce, color }) {
             </button>
         </div>
 
-        {data.length && selectedEntry && captionPortal.current && createPortal(<EntryInfo entry={selectedEntry} isLatest={selectedEntry.commit === latest.commit}/>, captionPortal.current)}
+        {(data.length && selectedEntry && captionPortal.current && createPortal(<EntryInfo entry={selectedEntry} isLatest={selectedEntry.commit === latest.commit}/>, captionPortal.current) || null)}
     </>
 }
 

src/main.jsx

@@ -116,21 +116,20 @@ function App() {
     const [flip, setFlip] = useState(false)
     const pane = useRef()
 
-    function switchToTab(index, pushState) {
+    function switchToTab(index, pushState, prevTabIndex) {
         if (index === paneIndex || index === tabIndex) return
-
-        console.info("switching to tab", index)
-
         setRotation(rotation - 180)
-        setTabIndex(index)
+
+        console.info("switching to tab", index, "from ", prevTabIndex)
 
         if (pushState)
             history.pushState(null, tabs[index].name, tabs[index].slug)
 
         setTimeout(() => {
+            setTabIndex(index)
             setPaneIndex(index)
             setFlip(!flip)
-        }, 300) // half the animation time
+        }, prevTabIndex === 0 ? 175 : 300) // half the animation time
     }
 
     useEffect(() => {
@@ -155,7 +154,7 @@ function App() {
                     onClick={evt => {
                         const q = window.matchMedia("(prefers-reduced-motion: reduce)")
                         if (!q.matches) {
-                            switchToTab(index, true)
+                            switchToTab(index, true, tabIndex)
                             evt.preventDefault()
                         }
                     }}
@@ -172,13 +171,14 @@ function App() {
         </nav>
         <main id="main" ref={pane} className={clsx(tabs[paneIndex].color)} style={{
             transform: `perspective(4000px) rotateX(${rotation}deg)`,
+            overflow: 'hidden'
         }}>
             <div style={{
                 display: "flex",
                 flex: 1,
                 transform: `rotateX(${flip ? '180deg' : '0deg'})`,
             }}>
-                {tabs[paneIndex].pane({ captionPortal, nonce: rotation })}
+                {tabs[paneIndex].pane({ captionPortal })}
             </div>
         </main>
         {tabIndex !== 0 && <div className="caption outline-invert" ref={captionPortal}></div>}