mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Main Iteration
This commit is contained in:
parent
2ffead179a
commit
838d496aab
2 changed files with 33 additions and 2 deletions
|
@ -241,7 +241,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
|
|||
)}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div>Loading...</div> // Replace this with your preferred progress indicator
|
||||
<div className='loading-circle'></div>
|
||||
) : (
|
||||
<>
|
||||
<SearchResultsRow
|
||||
|
@ -333,7 +333,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({ serverId = windo
|
|||
/>
|
||||
|
||||
{allEmpty && !isLoading && (
|
||||
<div>Sorry, nothing's here :/</div>
|
||||
<div className='sorry-text'>Sorry! No results found for "{query}"</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -9,3 +9,34 @@
|
|||
font-size: 2em;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.sorry-text {
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
// New styles for loading circle
|
||||
.loading-circle {
|
||||
border: 5px solid #557ece;
|
||||
border-radius: 50%;
|
||||
border-top: 5px solid #1b1b1bd7;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue