Smoother loading spinner show/hide, fix pause when shown during stalls

This commit is contained in:
Max Goodhart
2026-01-26 00:29:44 -08:00
parent c2aa59ef00
commit d2636f756a

View File

@@ -95,7 +95,7 @@ function Overlay({
</span> </span>
</StreamLocation> </StreamLocation>
)} )}
{isLoading && <LoadingSpinner />} <LoadingSpinner isVisible={isLoading} />
</SpaceBorder> </SpaceBorder>
) )
})} })}
@@ -307,14 +307,19 @@ const StreamLocation = styled.div`
} }
` `
const LoadingSpinner = styled(TailSpin)` const LoadingSpinner = styled(TailSpin)<{ isVisible: boolean }>`
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 100px; width: 100px;
height: 100px; height: 100px;
opacity: 0.5; opacity: ${({ isVisible }) => (isVisible ? 0.5 : 0)};
transition:
opacity 0.5s ease-in-out,
visibility 0s ${({ isVisible }) => (isVisible ? '0s' : '0.5s')};
visibility: ${({ isVisible }) => (isVisible ? 'visible' : 'hidden')};
` `
const BlurCover = styled.div` const BlurCover = styled.div`