minor fixes for waveform loading

www/app/[domain]/transcripts/[transcriptId]/page.tsx

@@ -11,7 +11,6 @@ import "../../../styles/button.css";
 import FinalSummary from "./finalSummary";
 import TranscriptTitle from "../transcriptTitle";
 import Player from "../player";
-import WaveformLoading from "../waveformLoading";
 import { useRouter } from "next/navigation";
 import { Flex, Grid, GridItem, Skeleton, Text } from "@chakra-ui/react";
 

www/app/[domain]/transcripts/player.tsx

@@ -74,7 +74,6 @@ export default function Player(props: PlayerProps) {
       _wavesurfer.on("timeupdate", setCurrentTime);
 
       setWaveRegions(_wavesurfer.registerPlugin(RegionsPlugin.create()));
-      // renderMarkers();
 
       _wavesurfer.toggleInteraction(true);
 
@@ -95,9 +94,13 @@ export default function Player(props: PlayerProps) {
   }, [props.media, wavesurfer]);
 
   useEffect(() => {
+    if (!waveRegions) return;
+
     topicsRef.current = props.topics;
     if (firstRender) {
       setFirstRender(false);
+      // wait for the waveform to render, if you don't markers will be stacked on top of each other
+      // I tried to listen for the waveform to be ready but it didn't work
       setTimeout(() => {
         renderMarkers();
       }, 300);