low data mode preferences added, images loaded based as per the low data mode settings

packages/app/src/Element/Event/RevealMedia.tsx

@@ -25,7 +25,7 @@ export default function RevealMedia(props: RevealMediaProps) {
   const isMine = props.creator === publicKey;
   const hideMedia = preferences.autoLoadMedia === "none" || (!isMine && hideNonFollows);
   const hostname = new URL(props.link).hostname;
-
+  const lowDataMode = preferences.lowDataMode;
   const url = new URL(props.link);
   const extension = FileExtensionRegex.test(url.pathname.toLowerCase()) && RegExp.$1;
   const type = (() => {
@@ -76,7 +76,29 @@ export default function RevealMedia(props: RevealMediaProps) {
         />
       </Reveal>
     );
-  } else {
+  } else if(lowDataMode) {
+    return (
+      <Reveal
+        message={
+          <FormattedMessage
+            defaultMessage="Images will not be loaded automatically in low data mode, update <a><i>your preference</i></a> to show media as per your media preference."
+            id="VfHIx1"
+            values={{
+              i: i => <i>{i}</i>,
+              a: a => <Link to="/settings/preferences">{a}</Link>,
+            }}
+          />
+        }>
+        <MediaElement
+          mime={`${type}/${extension}`}
+          url={url.toString()}
+          onMediaClick={props.onMediaClick}
+          meta={props.meta}
+        />
+      </Reveal>
+    );
+  }
+  else{
     return (
       <MediaElement
         mime={`${type}/${extension}`}

packages/app/src/Login/Preferences.ts

@@ -96,6 +96,11 @@ export interface UserPreferences {
    * Auto-translate when available
    */
   autoTranslate?: boolean;
+    /**
+   * Low Data mode - images/reactions wont be loaded
+   */
+  lowDataMode: boolean;
+
 }
 
 export const DefaultPreferences = {
@@ -116,4 +121,5 @@ export const DefaultPreferences = {
   showStatus: true,
   checkSigs: true,
   autoTranslate: true,
+  lowDataMode: false
 } as UserPreferences;

packages/app/src/Pages/settings/Preferences.tsx

@@ -497,6 +497,23 @@ const PreferencesPage = () => {
           />
         </div>
       </div>
+      <div className="flex justify-between">
+        <div className="flex flex-col g8">
+          <h4>
+            <FormattedMessage {...messages.LowDataMode} />
+          </h4>
+          <small>
+            <FormattedMessage {...messages.LowDataModeHelp} />
+          </small>
+        </div>
+        <div>
+          <input
+            type="checkbox"
+            checked={perf.lowDataMode}
+            onChange={e => updatePreferences(id, { ...perf, lowDataMode: e.target.checked })}
+          />
+        </div>
+      </div>
     </div>
   );
 };

packages/app/src/Pages/settings/messages.ts

@@ -76,4 +76,9 @@ export default defineMessages({
   ServiceWorkerNotRunning: { defaultMessage: "Service Worker Not Running", id: "RDha9y" },
   SubscribedToPush: { defaultMessage: "Subscribed to Push", id: "G3A56c" },
   NotSubscribedToPush: { defaultMessage: "Not Subscribed to Push", id: "d2ebEu" },
+  LowDataMode: { defaultMessage: "Low Data Mode", id: '87tg/I' },
+  LowDataModeHelp: {
+    defaultMessage: "Reactions will not be shown on timeline and images would not load automatically",
+    id: 'Qie1Ef',
+  },
 });