== 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 wikis
Scenario: Images from other wikis load
Given that the external wiki project's title is visible and requests images from other wikis via the MediaSearch API
When the request is pending
Then a loading indicator is displayed
And the indicator disappears when the images are returned
```
=== Test Steps
__Test Case 1: Loading indicator for images from other wikis__
1. Open the overlay and scroll down until the other wiki projects UI title ("Media from other projects") is visible. Once visible, it triggers the MediaSearch API to fetch images from other wikis.
2. Throttle the network connection to simulate a delay.
3. **AC1:** A loading indicator is shown while the API request is in progress.
4. **AC2:** The loading indicator disappears once the results are returned and rendered.