first load spinner

src/components/video/controls/LoadingControl.tsx

@@ -4,7 +4,9 @@ import { useVideoPlayerState } from "../VideoContext";
 export function LoadingControl() {
   const { videoState } = useVideoPlayerState();
 
-  if (!videoState.isLoading) return null;
+  const isLoading = videoState.isFirstLoading || videoState.isLoading;
+
+  if (!isLoading) return null;
 
   return <Spinner />;
 }

src/components/video/controls/MiddlePauseControl.tsx

@@ -12,6 +12,7 @@ export function MiddlePauseControl() {
 
   if (videoState.hasPlayedOnce) return null;
   if (videoState.isPlaying) return null;
+  if (videoState.isFirstLoading) return null;
 
   return (
     <div

src/components/video/hooks/useVideoPlayer.ts

@@ -13,6 +13,7 @@ export type PlayerState = {
   isPaused: boolean;
   isSeeking: boolean;
   isLoading: boolean;
+  isFirstLoading: boolean;
   isFullscreen: boolean;
   time: number;
   duration: number;
@@ -32,6 +33,7 @@ export const initialPlayerState: PlayerContext = {
   isFullscreen: false,
   isLoading: false,
   isSeeking: false,
+  isFirstLoading: true,
   time: 0,
   duration: 0,
   volume: 0,
@@ -64,6 +66,7 @@ function readState(player: HTMLVideoElement, update: SetPlayer) {
     ...state,
     pausedWhenSeeking: s.pausedWhenSeeking,
     hasPlayedOnce: s.hasPlayedOnce,
+    isFirstLoading: s.isFirstLoading,
   }));
 }
 
@@ -122,6 +125,12 @@ function registerListeners(player: HTMLVideoElement, update: SetPlayer) {
       buffered: handleBuffered(player.currentTime, player.buffered),
     }));
   };
+  const canplay = () => {
+    update((s) => ({
+      ...s,
+      isFirstLoading: false,
+    }));
+  };
 
   player.addEventListener("pause", pause);
   player.addEventListener("playing", playing);
@@ -133,6 +142,7 @@ function registerListeners(player: HTMLVideoElement, update: SetPlayer) {
   player.addEventListener("volumechange", volumechange);
   player.addEventListener("progress", progress);
   player.addEventListener("waiting", waiting);
+  player.addEventListener("canplay", canplay);
 
   return () => {
     player.removeEventListener("pause", pause);
@@ -145,6 +155,7 @@ function registerListeners(player: HTMLVideoElement, update: SetPlayer) {
     player.removeEventListener("volumechange", volumechange);
     player.removeEventListener("progress", progress);
     player.removeEventListener("waiting", waiting);
+    player.removeEventListener("canplay", canplay);
   };
 }
 

src/views/search/SearchResultsView.tsx

@@ -52,6 +52,8 @@ export function SearchResultsView({ searchQuery }: { searchQuery: MWQuery }) {
   );
 
   useEffect(() => {
+    // TODO use cache
+    // TODO run immediately without debounce on mount
     async function runSearch(query: MWQuery) {
       const searchResults = await runSearchQuery(query);
       if (!searchResults) return;