mirror of
https://github.com/streamwall/streamwall.git
synced 2026-04-03 20:32:08 -04:00
Smoother loading spinner show/hide, fix pause when shown during stalls
This commit is contained in:
@@ -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`
|
||||||
|
|||||||
Reference in New Issue
Block a user