mirror of
https://github.com/sct/overseerr.git
synced 2025-09-17 17:24:35 +02:00
feat(frontend): loading spinner
This commit is contained in:
32
src/components/Common/LoadingSpinner/index.tsx
Normal file
32
src/components/Common/LoadingSpinner/index.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const LoadingSpinner: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="h-64 inset-0 flex justify-center items-center text-cool-gray-200">
|
||||||
|
<svg
|
||||||
|
className="w-16 h-16"
|
||||||
|
viewBox="0 0 38 38"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<g fill="none" fillRule="evenodd">
|
||||||
|
<g transform="translate(1 1)" strokeWidth="2">
|
||||||
|
<circle strokeOpacity=".5" cx="18" cy="18" r="18" />
|
||||||
|
<path d="M36 18c0-9.94-8.06-18-18-18">
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
from="0 18 18"
|
||||||
|
to="360 18 18"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LoadingSpinner;
|
@@ -19,6 +19,7 @@ import Slider from '../Slider';
|
|||||||
import TitleCard from '../TitleCard';
|
import TitleCard from '../TitleCard';
|
||||||
import PersonCard from '../PersonCard';
|
import PersonCard from '../PersonCard';
|
||||||
import { LanguageContext } from '../../context/LanguageContext';
|
import { LanguageContext } from '../../context/LanguageContext';
|
||||||
|
import LoadingSpinner from '../Common/LoadingSpinner';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
releasedate: 'Release Date',
|
releasedate: 'Release Date',
|
||||||
@@ -99,12 +100,13 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (!data && !error) {
|
if (!data && !error) {
|
||||||
return <div>loading!</div>;
|
return <LoadingSpinner />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return <div>Unknwon?</div>;
|
return <div>Broken?</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "
|
className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "
|
||||||
|
Reference in New Issue
Block a user