Improve styles

danila · Sep 24, 2024 · 26799c9 · 26799c9
1 parent 98a972b
commit 26799c9
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/src/components/MaritimeFlagQuiz.js b/src/components/MaritimeFlagQuiz.js
@@ -44,6 +44,7 @@ const MaritimeFlagQuiz = () => {
   const [totalQuestions, setTotalQuestions] = useState(0);
   const [selectedAnswer, setSelectedAnswer] = useState(null);
   const [progress, setProgress] = useState(0);
+  const [imageLoaded, setImageLoaded] = useState(false);
 
   const shuffleArray = (array) => {
     for (let i = array.length - 1; i > 0; i--) {
@@ -97,17 +98,23 @@ const MaritimeFlagQuiz = () => {
         <CardTitle className="text-center">Морские сигнальные флаги</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="text-center mb-4">
+        <div className="text-center mb-4 relative" style={{ height: '192px' }}>
           <p className="text-2xl font-bold mb-4">Что означает этот флаг?</p>
+          {!imageLoaded && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-wiki-blue"></div>
+            </div>
+          )}
           <Image
             src={currentFlag.url}
             alt={`${currentFlag.name} flag`}
             width={240}
             height={152}
-            className="mx-auto object-contain mb-4 border border-wiki-blue cursor-pointer"
+            className={`mx-auto object-contain mb-4 border border-wiki-blue cursor-pointer transition-opacity duration-300 ${
+              imageLoaded ? 'opacity-100' : 'opacity-0'
+            }`}
             style={{ aspectRatio: '120 / 76' }}
-            placeholder="blur"
-            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="
+            onLoad={() => setImageLoaded(true)}
             priority
           />
         </div>