feat: update App component to have a better loading screen

- Changed the logo image source in App.tsx to use a file based svg rather than url one.
- Enhanced the loading indicator with an animated SVG.
- Adjusted styles for better alignment and spacing in the loading section.
- Added the dark-transparent.svg file to the public directory.

2 files changed, 44 insertions, 8 deletions

diff --git a/apps/browser-extension/entrypoints/popup/App.tsx b/apps/browser-extension/entrypoints/popup/App.tsx
index d190716e..c5a350c8 100644
--- a/apps/browser-extension/entrypoints/popup/App.tsx
+++ b/apps/browser-extension/entrypoints/popup/App.tsx
@@ -266,14 +266,35 @@ function App() {
 					<img
 						alt="supermemory"
 						className="w-8 h-8 flex-shrink-0"
-						src="/icon-48.png"
+						src="./dark-transparent.svg"
+						style={{ width: "80%", height: "45px" }}
 					/>
-					<h1 className="m-0 text-lg font-semibold text-black flex-1">
-						supermemory
-					</h1>
 				</div>
-				<div className="p-4">
-					<div>Loading...</div>
+
+				<div className="p-4 text-black min-h-[300px] flex items-center justify-center">
+					<div className="flex items-center gap-3 text-base text-black">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="1em"
+							height="1em"
+							viewBox="0 0 24 24"
+							fill="currentColor"
+							className="text-black"
+							aria-hidden="true"
+						>
+							<path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
+								<animateTransform
+									attributeName="transform"
+									type="rotate"
+									values="0 12 12;360 12 12"
+									dur="0.75s"
+									repeatCount="indefinite"
+								/>
+							</path>
+						</svg>
+
+						<span className="font-semibold">Loading...</span>
+					</div>
 				</div>
 			</div>
 		)
@@ -285,7 +306,7 @@ function App() {
 				<img
 					alt="supermemory"
 					className="w-8 h-8 flex-shrink-0"
-					src="https://assets.supermemory.ai/brand/wordmark/dark-transparent.svg"
+					src="./dark-transparent.svg"
 					style={{ width: "80%", height: "45px" }}
 				/>
 				{userSignedIn && (
@@ -313,7 +334,7 @@ function App() {
 					</button>
 				)}
 			</div>
-			<div className="p-4">
+			<div className="p-4 min-h-[250px]">
 				{userSignedIn ? (
 					<div className="text-left">
 						{/* Tab Navigation */}
diff --git a/apps/browser-extension/public/dark-transparent.svg b/apps/browser-extension/public/dark-transparent.svg
new file mode 100644
index 00000000..6e58d4f4
--- /dev/null
+++ b/apps/browser-extension/public/dark-transparent.svg
@@ -0,0 +1,15 @@
+<svg width="2560" height="512" viewBox="0 0 2560 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M527.06 228.982H410.629V128H373.012V237.567C373.012 249.205 377.616 260.381 385.798 268.615L480.867 364.283L507.466 337.517L437.249 266.858H527.082V229.004L527.06 228.982Z" fill="#1C2026"/>
+<path d="M232.948 174.504L303.164 245.163H213.332V283.017H329.763V383.999H367.38V274.432C367.38 262.795 362.776 251.618 354.594 243.384L259.546 147.738L232.948 174.504Z" fill="#1C2026"/>
+<path d="M715.99 330.047C697.748 330.047 682.78 326.072 671.128 318.124C659.455 310.175 652.407 298.823 649.963 284.046L682.693 275.527C684.002 282.158 686.227 287.362 689.326 291.138C692.424 294.937 696.286 297.616 700.89 299.24C705.494 300.843 710.535 301.656 715.99 301.656C724.259 301.656 730.369 300.185 734.318 297.264C738.268 294.322 740.253 290.699 740.253 286.33C740.253 281.96 738.377 278.622 734.602 276.251C730.827 273.88 724.827 271.947 716.535 270.432L708.636 269.005C698.861 267.117 689.915 264.504 681.842 261.188C673.747 257.873 667.266 253.284 662.378 247.421C657.491 241.559 655.047 233.983 655.047 224.717C655.047 210.708 660.131 199.971 670.277 192.484C680.445 185.018 693.777 181.264 710.338 181.264C725.94 181.264 738.922 184.777 749.265 191.759C759.608 198.764 766.372 207.942 769.579 219.294L736.566 229.504C735.06 222.324 732.005 217.208 727.401 214.178C722.797 211.148 717.103 209.633 710.338 209.633C703.574 209.633 698.381 210.818 694.824 213.19C691.246 215.561 689.457 218.833 689.457 222.983C689.457 227.528 691.333 230.887 695.108 233.061C698.861 235.235 703.945 236.904 710.338 238.023L718.237 239.451C728.776 241.339 738.311 243.842 746.865 246.982C755.418 250.1 762.182 254.557 767.179 260.332C772.154 266.107 774.663 273.924 774.663 283.761C774.663 298.516 769.339 309.934 758.713 317.97C748.087 326.028 733.838 330.047 715.968 330.047H715.99Z" fill="#1C2026"/>
+<path d="M836.632 329.474C825.722 329.474 816.187 326.971 808.004 321.943C799.822 316.937 793.472 309.976 788.956 301.084C784.439 292.191 782.191 281.959 782.191 270.431V186.4H817.736V267.599C817.736 278.204 820.311 286.153 825.504 291.444C830.675 296.736 838.05 299.393 847.651 299.393C858.561 299.393 867.027 295.748 873.049 288.458C879.071 281.168 882.083 271.002 882.083 257.937V186.4H917.627V327.213H882.65V308.769H877.566C875.318 313.511 871.085 318.144 864.867 322.69C858.67 327.235 849.244 329.496 836.654 329.496L836.632 329.474Z" fill="#1C2026"/>
+<path d="M943.004 383.992V186.398H977.981V203.437H983.065C986.251 197.948 991.248 193.073 998.012 188.813C1004.78 184.554 1014.46 182.424 1027.08 182.424C1038.36 182.424 1048.81 185.212 1058.39 190.79C1067.99 196.367 1075.69 204.557 1081.52 215.338C1087.34 226.119 1090.27 239.184 1090.27 254.51V259.055C1090.27 274.381 1087.34 287.446 1081.52 298.227C1075.69 309.008 1067.97 317.198 1058.39 322.775C1048.79 328.352 1038.36 331.141 1027.08 331.141C1018.61 331.141 1011.52 330.153 1005.78 328.155C1000.04 326.179 995.437 323.61 991.946 320.492C988.455 317.374 985.684 314.212 983.632 310.984H978.548V383.948H943.004V383.992ZM1016.36 299.961C1027.47 299.961 1036.63 296.404 1043.88 289.312C1051.12 282.22 1054.74 271.856 1054.74 258.221V255.388C1054.74 241.753 1051.08 231.389 1043.75 224.296C1036.41 217.204 1027.29 213.647 1016.38 213.647C1005.47 213.647 996.353 217.204 989.022 224.296C981.691 231.389 978.025 241.753 978.025 255.388V258.221C978.025 271.856 981.691 282.22 989.022 289.312C996.353 296.404 1005.47 299.961 1016.38 299.961H1016.36Z" fill="#1C2026"/>
+<path d="M1172.66 331.185C1158.74 331.185 1146.47 328.199 1135.85 322.248C1125.22 316.276 1116.95 307.866 1111.02 296.975C1105.1 286.084 1102.14 273.261 1102.14 258.506V255.103C1102.14 240.347 1105.04 227.524 1110.89 216.633C1116.71 205.743 1124.89 197.333 1135.43 191.36C1145.97 185.41 1158.19 182.424 1172.11 182.424C1186.03 182.424 1197.79 185.498 1207.94 191.646C1218.09 197.794 1226.01 206.313 1231.64 217.204C1237.29 228.095 1240.1 240.721 1240.1 255.103V267.311H1138.25C1138.62 276.972 1142.2 284.811 1148.96 290.871C1155.73 296.931 1164.02 299.961 1173.79 299.961C1183.57 299.961 1191.1 297.788 1195.79 293.44C1200.48 289.093 1204.06 284.262 1206.5 278.97L1235.57 294.296C1232.92 299.215 1229.13 304.573 1224.13 310.347C1219.13 316.122 1212.52 321.04 1204.23 325.103C1195.96 329.165 1185.42 331.207 1172.64 331.207L1172.66 331.185ZM1138.51 240.611H1203.97C1203.21 232.465 1199.98 225.943 1194.24 221.025C1188.5 216.106 1181.02 213.647 1171.81 213.647C1162.6 213.647 1154.59 216.106 1148.96 221.025C1143.31 225.943 1139.84 232.487 1138.53 240.611H1138.51Z" fill="#1C2026"/>
+<path d="M1257.58 327.211V186.399H1292.56V202.296H1297.64C1299.71 196.609 1303.14 192.459 1307.94 189.802C1312.74 187.146 1318.33 185.828 1324.72 185.828H1341.65V217.622H1324.15C1315.12 217.622 1307.7 220.038 1301.87 224.868C1296.05 229.699 1293.12 237.12 1293.12 247.155V327.211H1257.58Z" fill="#1C2026"/>
+<path d="M1355.18 327.213V186.4H1390.16V201.726H1395.24C1397.68 197.006 1401.72 192.878 1407.37 189.386C1413.02 185.895 1420.44 184.139 1429.65 184.139C1439.62 184.139 1447.61 186.071 1453.63 189.957C1459.65 193.844 1464.26 198.894 1467.46 205.152H1472.55C1475.73 199.092 1480.25 194.085 1486.1 190.111C1491.92 186.137 1500.19 184.161 1510.93 184.161C1519.57 184.161 1527.43 186.005 1534.5 189.694C1541.54 193.383 1547.19 198.96 1551.43 206.447C1555.66 213.935 1557.78 223.333 1557.78 234.706V327.257H1522.23V237.253C1522.23 229.503 1520.25 223.684 1516.32 219.797C1512.37 215.911 1506.81 213.979 1499.67 213.979C1491.58 213.979 1485.33 216.592 1480.91 221.796C1476.48 226.999 1474.27 234.421 1474.27 244.082V327.279H1438.73V237.275C1438.73 229.525 1436.74 223.706 1432.81 219.819C1428.87 215.933 1423.3 214.001 1416.17 214.001C1408.07 214.001 1401.83 216.614 1397.4 221.817C1392.97 227.021 1390.77 234.443 1390.77 244.104V327.301H1355.22L1355.18 327.213Z" fill="#1C2026"/>
+<path d="M1645.78 331.185C1631.86 331.185 1619.59 328.199 1608.97 322.248C1598.34 316.276 1590.07 307.866 1584.14 296.975C1578.22 286.084 1575.26 273.261 1575.26 258.506V255.103C1575.26 240.347 1578.16 227.524 1584.01 216.633C1589.83 205.743 1598.01 197.333 1608.55 191.36C1619.09 185.41 1631.31 182.424 1645.23 182.424C1659.15 182.424 1670.91 185.498 1681.06 191.646C1691.21 197.794 1699.13 206.313 1704.76 217.204C1710.41 228.095 1713.22 240.721 1713.22 255.103V267.311H1611.37C1611.74 276.972 1615.32 284.811 1622.08 290.871C1628.85 296.931 1637.14 299.961 1646.91 299.961C1656.69 299.961 1664.22 297.788 1668.93 293.44C1673.62 289.093 1677.2 284.262 1679.64 278.97L1708.71 294.296C1706.07 299.215 1702.27 304.573 1697.27 310.347C1692.28 316.122 1685.66 321.04 1677.37 325.103C1669.1 329.165 1658.56 331.207 1645.78 331.207V331.185ZM1611.65 240.611H1677.11C1676.35 232.465 1673.12 225.943 1667.38 221.025C1661.64 216.106 1654.16 213.647 1644.95 213.647C1635.74 213.647 1627.73 216.106 1622.1 221.025C1616.45 225.943 1612.98 232.487 1611.67 240.611H1611.65Z" fill="#1C2026"/>
+<path d="M1730.7 327.213V186.4H1765.68V201.726H1770.76C1773.2 197.006 1777.24 192.878 1782.89 189.386C1788.54 185.895 1795.96 184.139 1805.17 184.139C1815.14 184.139 1823.13 186.071 1829.15 189.957C1835.17 193.844 1839.78 198.894 1842.98 205.152H1848.07C1851.25 199.092 1855.77 194.085 1861.62 190.111C1867.44 186.137 1875.71 184.161 1886.45 184.161C1895.09 184.161 1902.94 186.005 1910.01 189.694C1917.06 193.383 1922.71 198.96 1926.95 206.447C1931.18 213.935 1933.3 223.333 1933.3 234.706V327.257H1897.75V237.253C1897.75 229.503 1895.77 223.684 1891.84 219.797C1887.89 215.911 1882.33 213.979 1875.19 213.979C1867.1 213.979 1860.85 216.592 1856.43 221.796C1852 226.999 1849.79 234.421 1849.79 244.082V327.279H1814.25V237.275C1814.25 229.525 1812.26 223.706 1808.33 219.819C1804.38 215.933 1798.82 214.001 1791.69 214.001C1783.59 214.001 1777.35 216.614 1772.92 221.817C1768.49 227.021 1766.29 234.443 1766.29 244.104V327.301H1730.74L1730.7 327.213Z" fill="#1C2026"/>
+<path d="M2024.13 331.185C2010.21 331.185 1997.71 328.352 1986.6 322.665C1975.5 316.978 1966.75 308.744 1960.35 297.963C1953.96 287.182 1950.75 274.206 1950.75 259.077V254.532C1950.75 239.381 1953.94 226.426 1960.35 215.645C1966.75 204.864 1975.5 196.63 1986.6 190.943C1997.69 185.256 2010.21 182.424 2024.13 182.424C2038.06 182.424 2050.56 185.256 2061.66 190.943C2072.75 196.63 2081.5 204.864 2087.91 215.645C2094.31 226.426 2097.49 239.403 2097.49 254.532V259.077C2097.49 274.227 2094.28 287.182 2087.91 297.963C2081.52 308.744 2072.77 316.978 2061.66 322.665C2050.56 328.352 2038.06 331.185 2024.13 331.185ZM2024.13 299.391C2035.04 299.391 2044.06 295.833 2051.21 288.741C2058.37 281.649 2061.93 271.461 2061.93 258.221V255.388C2061.93 242.148 2058.39 231.96 2051.34 224.867C2044.3 217.775 2035.22 214.218 2024.11 214.218C2013.01 214.218 2004.17 217.775 1997.03 224.867C1989.88 231.96 1986.32 242.148 1986.32 255.388V258.221C1986.32 271.461 1989.88 281.649 1997.03 288.741C2004.19 295.833 2013.2 299.391 2024.11 299.391H2024.13Z" fill="#1C2026"/>
+<path d="M2116.1 327.211V186.399H2151.08V202.296H2156.16C2158.24 196.609 2161.66 192.459 2166.46 189.802C2171.26 187.146 2176.85 185.828 2183.24 185.828H2200.18V217.622H2182.68C2173.64 217.622 2166.22 220.038 2160.4 224.868C2154.57 229.699 2151.65 237.12 2151.65 247.155V327.211H2116.1Z" fill="#1C2026"/>
+<path d="M2228.95 383.994V352.771H2305.13C2310.38 352.771 2313.02 349.939 2313.02 344.252V308.769H2307.94C2306.43 311.996 2304.08 315.202 2300.89 318.43C2297.69 321.658 2293.36 324.292 2287.91 326.378C2282.45 328.464 2275.49 329.496 2267.03 329.496C2256.12 329.496 2246.56 326.993 2238.4 321.965C2230.22 316.959 2223.87 309.998 2219.35 301.106C2214.84 292.213 2212.59 281.981 2212.59 270.453V186.4H2248.13V267.599C2248.13 278.204 2250.71 286.153 2255.9 291.444C2261.07 296.736 2268.45 299.393 2278.05 299.393C2288.96 299.393 2297.42 295.748 2303.45 288.458C2309.47 281.168 2312.48 271.002 2312.48 257.937V186.4H2348.02V352.2C2348.02 361.861 2345.21 369.569 2339.56 375.343C2333.91 381.118 2326.38 383.994 2317 383.994H2228.97H2228.95Z" fill="#1C2026"/>
+</svg>