docs: Update README for GitHub Pages configuration and enhance loading state handling in UI components

Author: AliErcanOzgokce

.github/workflows/action.yml

@@ -68,6 +68,8 @@ jobs:
 
       - name: Setup Pages
         uses: actions/configure-pages@v4
+        with:
+          enablement: true
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

README.MD

@@ -37,7 +37,10 @@ npm install
 npm run build
 ```
 
-### 4. Deploy and Commit
+### 4. Configure Your Github Pages Settings ⚠️
+In your repository, go to Settings → Pages → Source, and change it from "Deploy from a branch" to "GitHub Actions"
+
+### 5. Deploy and Commit
 ```bash
 git add .
 git commit -m "Complete all the TODOs"
@@ -46,6 +49,8 @@ git push origin main
 
 ## Live Deployment
 
+⚠️ **IMPORTANT:** You need to configure your GitHub Pages settings (step 4 above) in order to see your deployed app!
+
 Once you push your changes to the `main` branch:
 
 1. **GitHub Actions** will automatically:

ui/src/components/Arenas.tsx

@@ -78,7 +78,7 @@ export default function Arenas({ refreshKey, setRefreshKey }: RefreshProps) {
       },
     },
     {
-      enabled: !!packageId && !!battleEvents?.data?.length,
+      enabled: !!packageId && battleEvents?.data !== undefined,
       queryKey: [
         "multiGetObjects",
         "Arenas",
@@ -130,7 +130,7 @@ export default function Arenas({ refreshKey, setRefreshKey }: RefreshProps) {
     );
   }
 
-  if (eventsLoading || isPending) {
+  if (eventsLoading || isPending || !data) {
     return (
       <Card>
         <Text>Loading arenas...</Text>

ui/src/components/SharedObjects.tsx

@@ -162,7 +162,7 @@ export default function SharedObjects({ refreshKey, setRefreshKey }: RefreshProp
     );
   }
 
-  if (eventsLoading) {
+  if (eventsLoading || isPending || !data) {
     return (
       <Card>
         <Text>Loading marketplace...</Text>
@@ -181,13 +181,6 @@ export default function SharedObjects({ refreshKey, setRefreshKey }: RefreshProp
     );
   }
 
-  if (isPending || !data) {
-    return (
-      <Card>
-        <Text>Loading marketplace...</Text>
-      </Card>
-    );
-  }
 
   const listedHeroes = data.filter(obj => obj.data?.content && 'fields' in obj.data.content);