Add lazy loading to markdown images for performance improvements

README.md

@@ -1,4 +1,4 @@
-# [reactnative.dev](https://reactnative.dev/) &middot; [![CC BY 4.0 license](https://img.shields.io/badge/license-CC%20BY%204.0-blue.svg)](LICENSE-docs) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md) <a href="https://twitter.com/intent/follow?screen_name=reactnative"><img src="https://img.shields.io/twitter/follow/reactnative.svg?label=Follow%20@reactnative" alt="Follow @reactnative" /></a>
+# [reactnative.dev](https://reactnative.dev/) &middot; [![CC BY 4.0 license](https://img.shields.io/badge/license-CC%20BY%204.0-blue.svg)](LICENSE-docs) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md) <a href="https://twitter.com/intent/follow?screen_name=reactnative"><img loading="lazy" src="https://img.shields.io/twitter/follow/reactnative.svg?label=Follow%20@reactnative" alt="Follow @reactnative" /></a>
 
 This repo contains the website configuration and documentation powering the [React Native website](https://reactnative.dev/).
 
@@ -143,7 +143,7 @@ The `showcase.json` file contains the list of users that are highlighted in the
 1. `git checkout main` from any folder in your local `react-native-website` repository.
 1. `git pull origin main` to ensure you have the latest main code.
 1. `git checkout -b the-name-of-my-branch` to create a branch.
-    > replace `the-name-of-my-branch` with a suitable name, such as `update-animations-page`
+   > replace `the-name-of-my-branch` with a suitable name, such as `update-animations-page`
 
 ### Make the change
 
@@ -167,7 +167,7 @@ If possible, test any visual changes in all latest versions of the following bro
 
 1. Run `yarn prettier` and `yarn language:lint` in `./website` directory to ensure your changes are consistent with other files in the repo.
 1. `git add -A && git commit -m "My message"` to stage and commit your changes.
-    > replace `My message` with a commit message, such as `Fixed header logo on Android`
+   > replace `My message` with a commit message, such as `Fixed header logo on Android`
 1. `git push my-fork-name the-name-of-my-branch`
 1. Go to the [react-native-website repo](https://github.com/facebook/react-native-website) and you should see recently pushed branches.
 1. Follow GitHub's instructions.

docs/_getting-started-linux-android.md

@@ -97,7 +97,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able
 
 Congratulations! You successfully set up your development environment.
 
-<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
+<center><img loading="lazy" src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
 
 <h2>Now what?</h2>
 

docs/_getting-started-macos-android.md

@@ -128,7 +128,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able
 
 Congratulations! You successfully set up your development environment.
 
-<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
+<center><img loading="lazy" src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
 
 <h2>Now what?</h2>
 

docs/_getting-started-macos-ios.md

@@ -65,7 +65,7 @@ You might also want to ensure that all "shell script build phase" of your Xcode
 
 Congratulations! You successfully set up your development environment.
 
-<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
+<center><img loading="lazy" src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
 
 <h2>Now what?</h2>
 

docs/_getting-started-windows-android.md

@@ -128,7 +128,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able
 
 Congratulations! You successfully set up your development environment.
 
-<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
+<center><img loading="lazy" src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
 
 <h2>Now what?</h2>
 

docs/_integration-with-existing-apps-ios.md

@@ -575,7 +575,7 @@ Now build and run your iOS app as normal.
 
 Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
 
-<center><img src="/docs/assets/EmbeddedAppIOSVideo.gif" width="300" /></center>
+<center><img loading="lazy" src="/docs/assets/EmbeddedAppIOSVideo.gif" width="300" /></center>
 
 ### Creating a release build in Xcode
 

docs/_integration-with-existing-apps-kotlin.md

@@ -482,7 +482,7 @@ Now build and run your Android app as normal.
 
 Once you reach your React-powered Activity inside the app, it should load the JavaScript code from the development server and display:
 
-<center><img src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
+<center><img loading="lazy" src="/docs/assets/EmbeddedAppAndroidVideo.gif" width="300" /></center>
 
 ### Creating a release build in Android Studio
 

docs/datepickerios.md

@@ -87,7 +87,7 @@ Restricts the range of possible date/time values.
 
 Example with `maximumDate` set to December 31, 2017:
 
-<center><img src="/docs/assets/DatePickerIOS/maximumDate.gif" width="360"></img></center>
+<center><img loading="lazy" src="/docs/assets/DatePickerIOS/maximumDate.gif" width="360"></img></center>
 
 ---
 
@@ -115,7 +115,7 @@ The interval at which minutes can be selected.
 
 Example with `minuteInterval` set to `10`:
 
-<center><img src="/docs/assets/DatePickerIOS/minuteInterval.png" width="360"></img></center>
+<center><img loading="lazy" src="/docs/assets/DatePickerIOS/minuteInterval.png" width="360"></img></center>
 
 ---
 

docs/fabric-native-components-ios.md

@@ -38,19 +38,19 @@ cd ios
 open Demo.xcworkspace
 ```
 
-<img class="half-size" alt="Open Xcode Workspace" src="/docs/assets/fabric-native-components/1.webp" />
+<img loading="lazy" class="half-size" alt="Open Xcode Workspace" src="/docs/assets/fabric-native-components/1.webp" />
 
 2. Right click on app and select <code>New Group</code>, call the new group `WebView`.
 
-<img class="half-size" alt="Right click on app and select New Group" src="/docs/assets/fabric-native-components/2.webp" />
+<img loading="lazy" class="half-size" alt="Right click on app and select New Group" src="/docs/assets/fabric-native-components/2.webp" />
 
 3. In the `WebView` group, create <code>New</code>→<code>File from Template</code>.
 
-<img class="half-size" alt="Create a new file using the Cocoa Touch Classs template" src="/docs/assets/fabric-native-components/3.webp" />
+<img loading="lazy" class="half-size" alt="Create a new file using the Cocoa Touch Classs template" src="/docs/assets/fabric-native-components/3.webp" />
 
 4. Use the <code>Objective-C File</code> template, and name it <code>RCTWebView</code>.
 
-<img class="half-size" alt="Create an Objective-C RCTWebView class" src="/docs/assets/fabric-native-components/4.webp" />
+<img loading="lazy" class="half-size" alt="Create an Objective-C RCTWebView class" src="/docs/assets/fabric-native-components/4.webp" />
 
 5. Repeat step 4 and create a header file named `RCTWebView.h`.
 
@@ -215,13 +215,13 @@ To link the WebKit framework in your app, follow these steps:
 3. Select the General tab
 4. Scroll down until you find the _"Frameworks, Libraries, and Embedded Contents"_ section, and press the `+` button
 
-<img class="half-size" alt="Add webkit framework to your app 1" src="/docs/assets/AddWebKitFramework1.png" />
+<img loading="lazy" class="half-size" alt="Add webkit framework to your app 1" src="/docs/assets/AddWebKitFramework1.png" />
 
 5. In the search bar, filter for WebKit
 6. Select the WebKit framework
 7. Click on Add.
 
-<img class="half-size" alt="Add webkit framework to your app 2" src="/docs/assets/AddWebKitFramework2.png" />
+<img loading="lazy" class="half-size" alt="Add webkit framework to your app 2" src="/docs/assets/AddWebKitFramework2.png" />
 
 :::warning
 We are aware of a couple of issues with iOS that would create some problem when building the app with a custom iOS component.

docs/fabric-native-components.md

@@ -222,6 +222,6 @@ yarn run ios
 </TabItem>
 </Tabs>
 
-|                                      Android                                      |                                     iOS                                      |
-| :-------------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |
-| <img style={{ "max-height": "600px" }} src="/docs/assets/webview-android.webp" /> | <img style={{"max-height": "600px" }} src="/docs/assets/webview-ios.webp" /> |
+|                                             Android                                              |                                             iOS                                             |
+| :----------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
+| <img loading="lazy" style={{ "max-height": "600px" }} src="/docs/assets/webview-android.webp" /> | <img loading="lazy" style={{"max-height": "600px" }} src="/docs/assets/webview-ios.webp" /> |

docs/get-started-without-a-framework.md

@@ -112,7 +112,7 @@ Now that you have successfully run the app, let's modify it.
 
 Congratulations! You've successfully run and modified your first barebone React Native app.
 
-<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
+<center><img loading="lazy" src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
 
 ### Now what?
 

docs/hermes.md

@@ -6,7 +6,7 @@ title: Using Hermes
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
 <a href="https://hermesengine.dev">
-  <img width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
+  <img loading="lazy" width={300} height={300} className="hermes-logo" src="/docs/assets/HermesLogo.svg" style={{height: "auto"}}/>
 </a>
 
 [Hermes](https://hermesengine.dev) is an open-source JavaScript engine optimized for React Native. For many apps, using Hermes will result in improved start-up time, decreased memory usage, and smaller app size when compared to JavaScriptCore.

docs/intro-react-native-components.md

@@ -13,7 +13,7 @@ React Native is an open source framework for building Android and iOS applicatio
 In Android and iOS development, a **view** is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
 
 <figure>
-  <img src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
+  <img loading="lazy" src="/docs/assets/diagram_ios-android-views.svg" width="1000" alt="Diagram of Android and iOS app showing them both built on top of atomic elements called views." />
   <figcaption>Just a sampling of the many views used in Android and iOS apps.</figcaption>
 </figure>
 

docs/introduction.md

@@ -8,7 +8,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 <div className="content-banner">
   Welcome to the very start of your React Native journey! If you're looking for getting started instructions, they've moved to <a href="environment-setup">their own section</a>. Continue reading for an introduction to the documentation, Native Components, React, and more!
-  <img className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
+  <img loading="lazy" className="content-banner-img" src="/docs/assets/p_android-ios-devices.svg" alt=" " />
 </div>
 
 Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background.

docs/legacy/native-modules-android.md

@@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w
 To get started, open up the Android project within your React Native application in Android Studio. You can find your Android project here within a React Native app:
 
 <figure>
-  <img src="/docs/assets/native-modules-android-open-project.png" width="500" alt="Image of opening up an Android project within a React Native app inside of Android Studio." />
+  <img loading="lazy" src="/docs/assets/native-modules-android-open-project.png" width="500" alt="Image of opening up an Android project within a React Native app inside of Android Studio." />
   <figcaption>Image of where you can find your Android project</figcaption>
 </figure>
 
@@ -32,7 +32,7 @@ We also recommend enabling [Gradle Daemon](https://docs.gradle.org/2.9/userguide
 The first step is to create the (`CalendarModule.java` or `CalendarModule.kt`) Java/Kotlin file inside `android/app/src/main/java/com/your-app-name/` folder (the folder is the same for both Kotlin and Java). This Java/Kotlin file will contain your native module Java/Kotlin class.
 
 <figure>
-  <img src="/docs/assets/native-modules-android-add-class.png" width="700" alt="Image of adding a class called CalendarModule.java within the Android Studio." />
+  <img loading="lazy" src="/docs/assets/native-modules-android-add-class.png" width="700" alt="Image of adding a class called CalendarModule.java within the Android Studio." />
   <figcaption>Image of how to add the CalendarModuleClass</figcaption>
 </figure>
 
@@ -379,7 +379,7 @@ As you work through these guides and iterate on your native module, you will nee
 You should now be able to invoke your `createCalendarEvent()` method on your native module in the app. In our example this occurs by pressing the `NewModuleButton`. You can confirm this by viewing the log you set up in your `createCalendarEvent()` method. You can follow [these steps](https://developer.android.com/studio/debug/am-logcat.html) to view ADB logs in your app. You should then be able to search for your `Log.d` message (in our example “Create event called with name: testName and location: testLocation”) and see your message logged each time you invoke your native module method.
 
 <figure>
-  <img src="/docs/assets/native-modules-android-logs.png" width="1000" alt="Image of logs." />
+  <img loading="lazy" src="/docs/assets/native-modules-android-logs.png" width="1000" alt="Image of logs." />
   <figcaption>Image of ADB logs in Android Studio</figcaption>
 </figure>
 
@@ -790,7 +790,7 @@ promise.reject("Create Event error", "Error parsing date", e)
 Error message in React Native App when promise is rejected:
 
 <figure>
-  <img src="/docs/assets/native-modules-android-errorscreen.png" width="200" alt="Image of error message in React Native app." />
+  <img loading="lazy" src="/docs/assets/native-modules-android-errorscreen.png" width="200" alt="Image of error message in React Native app." />
   <figcaption>Image of error message</figcaption>
 </figure>
 

docs/legacy/native-modules-ios.md

@@ -19,7 +19,7 @@ In the following guide you will create a native module, `CalendarModule`, that w
 To get started, open up the iOS project within your React Native application in Xcode. You can find your iOS project here within a React Native app:
 
 <figure>
-  <img src="/docs/assets/native-modules-ios-open-project.png" width="500" alt="Image of opening up an iOS project within a React Native app inside of xCode." />
+  <img loading="lazy" src="/docs/assets/native-modules-ios-open-project.png" width="500" alt="Image of opening up an iOS project within a React Native app inside of xCode." />
   <figcaption>Image of where you can find your iOS project</figcaption>
 </figure>
 
@@ -30,7 +30,7 @@ We recommend using Xcode to write your native code. Xcode is built for iOS devel
 The first step is to create our main custom native module header and implementation files. Create a new file called `RCTCalendarModule.h`
 
 <figure>
-  <img src="/docs/assets/native-modules-ios-add-class.png" width="500" alt="Image of creating a class called  RCTCalendarModule.h." />
+  <img loading="lazy" src="/docs/assets/native-modules-ios-add-class.png" width="500" alt="Image of creating a class called  RCTCalendarModule.h." />
   <figcaption>Image of creating a custom native module file within the same folder as AppDelegate</figcaption>
 </figure>
 
@@ -207,7 +207,7 @@ As you work through these guides and iterate on your native module, you will nee
 You should now be able to invoke your `createCalendarEvent()` method on your native module in JavaScript. Since you are using `RCTLog` in the function, you can confirm your native method is being invoked by [enabling debug mode in your app](https://reactnative.dev/docs/debugging#chrome-developer-tools) and looking at the JS console in Chrome or the mobile app debugger Flipper. You should see your `RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);` message each time you invoke the native module method.
 
 <figure>
-  <img src="/docs/assets/native-modules-ios-logs.png" width="1000" alt="Image of logs." />
+  <img loading="lazy" src="/docs/assets/native-modules-ios-logs.png" width="1000" alt="Image of logs." />
   <figcaption>Image of iOS logs in Flipper</figcaption>
 </figure>
 

docs/pressable.md

@@ -23,7 +23,7 @@ After pressing [`onPressIn`](#onpressin), one of two things will happen:
 1. The person will remove their finger, triggering [`onPressOut`](#onpressout) followed by [`onPress`](#onpress).
 2. If the person leaves their finger longer than 500 milliseconds before removing it, [`onLongPress`](#onlongpress) is triggered. ([`onPressOut`](#onpressout) will still fire when they remove their finger.)
 
-<img src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
+<img loading="lazy" src="/docs/assets/d_pressable_pressing.svg" width="1000" alt="Diagram of the onPress events in sequence." />
 
 Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from the wrapped element. Presses can start anywhere within a `HitRect`.
 
@@ -32,7 +32,7 @@ Fingers are not the most precise instruments, and it is common for users to acci
 > The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
 
 <figure>
-  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
+  <img loading="lazy" src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
   <figcaption>
     You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
   </figcaption>