Adds a dedicated spinner page (for iOS redirect)

Implements a full-page spinner component with theming support.

This provides a visually consistent loading indicator across the application,
and improves the user experience during asynchronous operations.
The spinner can be themed via a URL parameter, or defaults to the browser's
preferred color scheme.

Author: tzarebczan

ui/component/fileActions/view.jsx

@@ -191,7 +191,7 @@ export default function FileActions(props: Props) {
                   <MenuItem className="comment__menu-option" onSelect={handleRepostClick}>
                     <div className="menu__link">
                       <Icon aria-hidden icon={ICONS.REPOST} />
-                      {claimMeta.reposted > 1
+                      {claimMeta?.reposted > 1
                         ? __(`%repost_total% Reposts`, { repost_total: claimMeta.reposted })
                         : __('Repost')}
                     </div>

ui/component/router/view.jsx

@@ -45,6 +45,7 @@ const IconsViewerPage = lazyImport(() => import('page/iconsViewer' /* webpackChu
 
 const FypPage = lazyImport(() => import('web/page/fyp' /* webpackChunkName: "fyp" */));
 const YouTubeTOSPage = lazyImport(() => import('web/page/youtubetos' /* webpackChunkName: "youtubetos" */));
+const SpinnerPage = lazyImport(() => import('web/page/spinner' /* webpackChunkName: "spinner" */));
 
 const SignInPage = lazyImport(() => import('page/signIn' /* webpackChunkName: "signIn" */));
 const SignInWalletPasswordPage = lazyImport(() =>
@@ -406,6 +407,7 @@ function AppRouter(props: Props) {
         <Route path={`/$/${PAGES.CAREERS_SENIOR_IOS_DEVELOPER}`} exact component={SeniorIosDeveloperPage} />
         <Route path={`/$/${PAGES.FYP}`} exact component={FypPage} />
         <Route path={`/$/${PAGES.YOUTUBE_TOS}`} exact component={YouTubeTOSPage} />
+        <Route path={`/$/${PAGES.SPINNER}`} exact component={SpinnerPage} />
         <Route path={`/$/${PAGES.ICONS_VIEWER}`} exact component={IconsViewerPage} />
 
         <Route path={`/$/${PAGES.AUTH_VERIFY}`} exact component={SignInVerifyPage} />

ui/constants/pages.js

@@ -115,3 +115,4 @@ exports.CAREERS_SENIOR_ANDROID_DEVELOPER = 'careers/senior_android_developer';
 exports.CAREERS_SENIOR_IOS_DEVELOPER = 'careers/senior_ios_developer';
 exports.ICONS_VIEWER = 'icons_viewer';
 exports.HIDDEN_CONTENT = 'hidden';
+exports.SPINNER = 'spinner';

ui/scss/all.scss

@@ -54,6 +54,7 @@
 @import 'component/section';
 @import 'component/snack-bar';
 @import 'component/spinner';
+@import 'component/spinner-page';
 @import 'component/splash';
 @import 'component/status-bar';
 @import 'component/syntax-highlighter';

ui/scss/component/_spinner-page.scss

@@ -0,0 +1,70 @@
+.spinner-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.spinner-page--dark {
+  background-color: #0b0b0d;
+}
+
+.spinner-page--light {
+  background-color: #f7f7f7;
+}
+
+.spinner-page__container {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner-page__logo {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon {
+    width: 64px;
+    height: 64px;
+  }
+}
+
+.spinner-page__ring {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  animation: spinner-page-rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+
+.spinner-page--dark .spinner-page__ring {
+  border: 3px solid transparent;
+  border-top-color: #f24158;
+}
+
+.spinner-page--light .spinner-page__ring {
+  border: 3px solid transparent;
+  border-top-color: #f24158;
+}
+
+@keyframes spinner-page-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

web/page/spinner/index.js

@@ -0,0 +1,2 @@
+import SpinnerPage from './view';
+export default SpinnerPage;

web/page/spinner/view.jsx

@@ -0,0 +1,39 @@
+// @flow
+import React from 'react';
+import * as ICONS from 'constants/icons';
+import Icon from 'component/common/icon';
+
+function getThemeFromParams(): ?string {
+  const urlParams = new URLSearchParams(window.location.search);
+  const themeParam = urlParams.get('theme');
+  if (themeParam === 'dark' || themeParam === 'light') {
+    return themeParam;
+  }
+  return null;
+}
+
+function getBrowserTheme(): string {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+    return 'light';
+  }
+  return 'dark';
+}
+
+const SpinnerPage = () => {
+  const paramTheme = getThemeFromParams();
+  const theme = paramTheme || getBrowserTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className={`spinner-page ${isDark ? 'spinner-page--dark' : 'spinner-page--light'}`}>
+      <div className="spinner-page__container">
+        <div className="spinner-page__ring" />
+        <div className="spinner-page__logo">
+          <Icon icon={ICONS.ODYSEE_LOGO} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SpinnerPage;