Fix Masonry (and other layout not being respected)

[ildyria]

Fixes #4183

Summary by CodeRabbit

• New Features

  • Pagination controls and remaining-count indicators for photos and albums

• Improvements

  • Show centered loading spinner while album data is fetching
  • Faster data loading via parallelized album/photo requests
  • Layout-aware loading to better preserve display settings and restore layout on load

• Bug Fixes

  • No-data message only shown after loading completes (prevents premature empty-state)

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2f6138b7-118b-46b5-86b9-b84d0aebf7eb

📥 Commits

Reviewing files that changed from the base of the PR and between 116a6f6 and 6a8a057.

📒 Files selected for processing (1)

• resources/js/components/gallery/albumModule/AlbumPanel.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• resources/js/components/gallery/albumModule/AlbumPanel.vue

---

📝 Walkthrough

Walkthrough

Added a loading guard and spinner to the album panel UI; refactored album loading to sync layout, run photo/album loads in parallel via a loader array and Promise.all, and introduced pagination state and getters for photos and albums.

Changes

Cohort / File(s)	Summary
UI: Album panel resources/js/components/gallery/albumModule/AlbumPanel.vue	Added a loading branch that renders a centered spinner when albumStore.isLoading; existing album/photo blocks now render under v-else. noData computation updated to require !albumStore.isLoading plus empty albums/photos.
Store: Album loading & pagination resources/js/stores/AlbumState.ts	Imported useLayoutStore and apply layout from album config. Refactored loadHead/load to prepare a loader array and Promise.all for parallel loadPhotos/loadAlbums, simplified model/base/smart album branches and reduced redundant config writes, preserved password/login flows. Added photos/albums pagination state fields and getters (hasMorePhotos, photosRemainingCount, hasMoreAlbums, albumsRemainingCount, hasPhotosPagination, hasAlbumsPagination).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 I nibble keys at break of dawn,

Spinners hum while loaders yawn.
Pages count and layouts settle,
Photos hop and albums nestle.
A tiny patch — a joyful trot.

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

resources/js/components/gallery/albumModule/AlbumPanel.vue (1)

17-34: ⚠️ Potential issue | 🔴 Critical

Critical: v-if="true" makes the spinner permanently visible and noData block unreachable.

The condition v-if="true" is a constant that always evaluates to true, causing:

1. The spinner to always render, regardless of actual loading state
2. The v-else-if="noData" block (lines 22-34) to be completely unreachable dead code
3. Users will never see the "no results" message or the upload button

This appears to be debug/placeholder code. The condition should likely check the actual loading state.

🐛 Proposed fix to show spinner only while loading

-			<div v-if="true">
+			<div v-if="albumStore.isLoading || albumStore.photos_loading || albumStore.albums_loading">
 				<div class="flex w-full h-full items-center justify-center">
 					<i class="pi pi-spin pi-spinner text-4xl text-primary-400" />
 				</div>
 			</div>

🧹 Nitpick comments (1)

resources/js/stores/AlbumState.ts (1)

349-363: Missing semicolon on line 352.

The parallel loading logic is well-structured, firing loadPhotos immediately and conditionally adding loadAlbums for model albums. However, line 352 is missing a trailing semicolon.

🔧 Proposed fix

 				this.config = data.data.config;
 				layoutStore.layout = data.data.config.photo_layout;

-				const loader = [this.loadPhotos(1, false)]
+				const loader = [this.loadPhotos(1, false)];

 				if (data.data.config.is_model_album) {

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 34c62a80-2f9a-4c39-a359-3aadb2bd4f61

📥 Commits

Reviewing files that changed from the base of the PR and between 38ca029 and 113580a.

📒 Files selected for processing (2)

• resources/js/components/gallery/albumModule/AlbumPanel.vue
• resources/js/stores/AlbumState.ts

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: bc80da93-65ea-453c-bf04-d4e8ee3e82c5

📥 Commits

Reviewing files that changed from the base of the PR and between 113580a and 116a6f6.

📒 Files selected for processing (2)

• resources/js/components/gallery/albumModule/AlbumPanel.vue
• resources/js/stores/AlbumState.ts