From 337f111fdf7d8a1be0acba9779342517c4cc903d Mon Sep 17 00:00:00 2001
From: Bob <80072466+bob0005@users.noreply.github.com>
Date: Thu, 12 Dec 2024 14:04:19 +0100
Subject: [PATCH] Remove quest UI while syncing (#2449)

* Remove quest UI while syncing

* Add quest load animation
---
 .../ui/modules/navigation/TopLeftNavigation.tsx  | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/ui/modules/navigation/TopLeftNavigation.tsx b/client/src/ui/modules/navigation/TopLeftNavigation.tsx
index c6bccb01a..8b4b844e2 100644
--- a/client/src/ui/modules/navigation/TopLeftNavigation.tsx
+++ b/client/src/ui/modules/navigation/TopLeftNavigation.tsx
@@ -4,6 +4,7 @@ import { useEntities, useEntitiesUtils } from "@/hooks/helpers/useEntities";
 import { useQuery } from "@/hooks/helpers/useQuery";
 import { useUnclaimedQuestsCount } from "@/hooks/helpers/useQuests";
 import useUIStore from "@/hooks/store/useUIStore";
+import { useWorldStore } from "@/hooks/store/useWorldLoading";
 import useNextBlockTimestamp from "@/hooks/useNextBlockTimestamp";
 import { soundSelector, useUiSounds } from "@/hooks/useUISound";
 import { Position } from "@/types/Position";
@@ -96,6 +97,8 @@ const WorkersHutTooltipContent = () => {
 export const TopLeftNavigation = memo(() => {
   const { setup } = useDojo();
 
+  const worldLoading = useWorldStore((state) => state.isWorldLoading);
+
   const { unclaimedQuestsCount } = useUnclaimedQuestsCount();
   const { isMapView, handleUrlChange, hexPosition } = useQuery();
   const { playerStructures } = useEntities();
@@ -321,10 +324,17 @@ export const TopLeftNavigation = memo(() => {
       </motion.div>
       <div className="relative">
         <SecondaryMenuItems />
-        {unclaimedQuestsCount > 0 && (
-          <div className="absolute right-0 px-4 top-full mt-2">
-            <QuestsMenu unclaimedQuestsCount={unclaimedQuestsCount} />
+        {worldLoading ? (
+          <div className="absolute right-2 p-4 mt-2 top-full flex flex-row items-center justify-center bg-black/80 rounded-lg">
+            <img src="/images/eternumloader.png" className="w-10" />
+            <div className="ml-4">Quests are loading...</div>
           </div>
+        ) : (
+          unclaimedQuestsCount > 0 && (
+            <div className="absolute right-0 px-4 top-full mt-2">
+              <QuestsMenu unclaimedQuestsCount={unclaimedQuestsCount} />
+            </div>
+          )
         )}
       </div>
     </div>