From 26799c94a2d17f6420f486d3c53fcf20aeca0936 Mon Sep 17 00:00:00 2001
From: danila <dnlrmkv@gmail.com>
Date: Tue, 24 Sep 2024 01:42:50 +0100
Subject: [PATCH] Improve styles

---
 src/components/MaritimeFlagQuiz.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/MaritimeFlagQuiz.js b/src/components/MaritimeFlagQuiz.js
index bf415c8..d69e98d 100644
--- 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>