== Background
- We want to add an entry point of images from other wikis. This is helpful to readers on wikis that have few images and is also related to https://meta.wikimedia.org/wiki/Community_Wishlist/Focus_areas/Improved_discovery_of_media_files in the Community Wishlist
- UI designs here: T402269
== User story
- As a visual learner, I want to be able to view images relevant to the topic I'm reading about, regardless of which wiki I'm on
== Requirements
[] Images must appear only from the article on other Wikipedias or from the wikidata item corresponding to the article
[] Images from other Wikipedias will be shown before images from Wikidata
[] Content should only appear in the user's language
[] Images will be lazy loaded when the user scrolls to the bottom of the page
[] Content like this must be clearly marked as coming from outside the current wiki:
- If image is used in one place: From xyz.wikipedia.org
- If image is used in multiple wikis: From xyz.wikipedia.org and XX other language editions of Wikipedia
- If image is from Wikidata or one non-wikipedia source: From Wikidata
[] Loading state for the other wikis feature
== Design
- See {T402269} @JScherer-WMF - would the figma file be the source of truth here?
- **Loading state** uses an inline [[ https://doc.wikimedia.org/codex/latest/components/demos/progress-bar.html | Codex ProgressBar ]]
{F65955747}
== Acceptance criteria
- Complete all requirements above with the design provided
- Provide a way to test this for design & product review
== Communication criteria - does this need an announcement or discussion?
- The treatment here will be discussed in first on-wiki community conversations
== BDD
```
Feature: Loading state for other wikisMedia from other projects in Image Browsing
Scenario: ILoading images from other wikis load
Given that the external wikie “Media from other project's titles” header is visible and requests images from other wikis via the MediaSearch APIat least 50% in view
When the MediaSearch API request is pending
Then a loading indicator is displayed
And the indicator disappears when the images are returnedonce the results return
Scenario: Empty state
Given the article has no images from other wikis
When the overlay is opened
Then the “Media from other projects” section is not displayed
Scenario: Image captions
Given an image from another wiki has a caption
When it is displayed
Then the caption is shown in plain text
And if no caption exists, nothing is displayed
Scenario: Wiki project labels
Given an image comes from another project
When it is displayed
Then the project label is shown using the rules for Wikipedia and Wikidata
Scenario: Interaction
Given I click an image from another wiki
When it opens in DetailView
Then the DetailView auto-scrolls into view
And I can navigate through these images with URL routing
And clicking the “Back to article” button returns me to the article page
```
=== Test Steps== Test Steps
__Test Case 1: Loading state__
1. Open the image overlay for any article.
2. Scroll until the “Media from other projects” header is 50% in view.
3. Throttle network in DevTools to slow down API.
4. **AC1:** A loading indicator appears while the API request is in progress.
5. **AC2:** The loading indicator disappears once images render.
__Test Case 2: Empty state__
6. Open the image overlay for an article without images in other wikis.
7. **AC3:** The “Media from other projects” section does not appear at all.
__Test Case 3: Captions__
8. Open the image overlay for an article with images from other projects.
9. Inspect the cards.
10. **AC4:** Captions are shown when available.
11. **AC5:** If no caption exists, nothing is displayed (no placeholder text).
__Test Case 4: Project labels__
12. Inspect source labels for images.
13. **AC6:** If one source, label = “From {project}.wikipedia.org”.
14. **AC7:** If multiple sources, label = “From {project}.wikipedia.org and X other language editions of Wikipedia”.
15. **AC8:** If from Wikidata, label = “From Wikidata”.
__Test Case 5: Interaction & navigation__
16. Click an image in the “Media from other projects” section.
__Test Case 1: Loading indicator for images from other wikis__17. **AC9:** The image opens in DetailView.
1. Open the overlay and scroll down until the other wiki projects UI title ("Media from other projects") is visible. Once visible,8. it triggers the MediaSearch API to fetch images from other wikis**AC10:** DetailView auto-scrolls into view.
219. Throttle the network connection to simulate a delay**AC11:** Navigation between images works with URL routing.
320. **AC1:** A loading indicator is shown while the API request is in progressScroll to bottom and click “Back to article”.
421. **AC12:** The loading indicator disappears once the results are returned and renderedUser is returned to the article page.
==Notes
- Testing with patchdemo or local developer setup requires these repositories: ReaderExperiments, Minerva, MobileFrontend, MobileFrontendContentProvider, and WikimediaMessages.