fix: Loading indicator fixes (#398)

Resolves https://github.com/webrecorder/replayweb.page/issues/397

## Changes

- Uses animated logo when loading
- Show non-animated logo for error and other states where user action is required.
- Only shows progress bar if progress is >0
- Fixes WARC progress bar percentage lagging behind displayed "Loaded"
values
- Fixes "Cancel" not redirecting back to initial view
- Removes extra spacing from logo image file

---------

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>

src/assets/brand/replaywebpage-icon-color-animated.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style>
+@keyframes a0_t { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
+</style><path d="M6.807 11.246h-0.001c-0.074 0-0.144-0.033-0.191-0.09c-0.047-0.057-0.067-0.131-0.054-0.204c.338-1.735 1.483-3.206 3.082-3.959c.038-0.018 .083-0.015 .118 .008c.036 .022 .057 .061 .058 .103c.001 .017-0.003 .035-0.011 .05c-0.426 1.035-0.719 2.371-0.81 3.856c-0.007 .132-0.117 .236-0.249 .236Zm7.364-4.091c-0.019-0.047-0.008-0.101 .027-0.138c.037-0.035 .092-0.045 .139-0.025c1.6 .753 2.745 2.224 3.081 3.96c.012 .072-0.008 .146-0.055 .203c-0.047 .056-0.117 .089-0.19 .09l-1.942 .001c-0.132 0-0.242-0.104-0.249-0.236c-0.091-1.485-0.384-2.821-0.811-3.855m3.002 5.591c.074 0 .144 .033 .192 .089c.047 .057 .067 .132 .054 .205c-0.336 1.736-1.481 3.208-3.082 3.96c-0.047 .02-0.102 .01-0.139-0.025c-0.035-0.037-0.045-0.091-0.026-0.138c.426-1.033 .719-2.369 .81-3.856c.008-0.132 .117-0.235 .249-0.235Zm-7.364 4.091c.007 .016 .01 .033 .01 .05c-0.001 .042-0.022 .081-0.057 .104c-0.036 .023-0.08 .027-0.119 .01c-1.599-0.754-2.744-2.225-3.081-3.961c-0.013-0.073 .007-0.147 .054-0.204c.048-0.056 .117-0.088 .191-0.088c.495-0.002 1.488-0.002 1.942-0.002c.132 0 .241 .103 .249 .235c.091 1.487 .384 2.823 .811 3.856m.694-3.825c-0.005-0.069 .019-0.136 .066-0.187c.048-0.05 .114-0.078 .183-0.078l2.477-0.001c.138 .001 .249 .112 .249 .25v.016c-0.107 1.583-0.461 2.962-0.997 3.872c-0.111 .198-0.249 .375-0.414 .531c-0.045 .035-0.109 .035-0.154 0c-0.164-0.155-0.304-0.334-0.414-0.531c-0.536-0.91-0.89-2.289-0.996-3.872m2.975-2.032v.016c0 .138-0.111 .249-0.249 .25h-2.477c-0.138 0-0.25-0.112-0.25-0.25l.001-0.016c.106-1.583 .46-2.961 .996-3.872c.127-0.214 .272-0.408 .414-0.53c.045-0.035 .109-0.035 .154 0c.142 .122 .288 .316 .414 .53c.536 .911 .89 2.289 .997 3.872" fill="#0891b2"/><path d="M23.774 13.333c.09 .05 .14 .149 .128 .25c-0.778 5.876-5.811 10.417-11.897 10.417c-6.114 0-11.165-4.581-11.907-10.495l-0.001-0.028c.001-0.137 .111-0.247 .248-0.248c.044 0 .087 .012 .125 .035c.54 .312 1.438 .835 1.768 1.028c.078 .045 .174 .045 .252-0.001l1.777-1.044c.071-0.042 .157-0.046 .231-0.012c.075 .035 .128 .103 .142 .184c.691 3.524 3.774 6.069 7.365 6.081c3.563-0.011 6.63-2.518 7.351-6.007c.014-0.073 .061-0.136 .126-0.171l2.042-1.103c.075-0.041 .165-0.04 .24 .001Zm-23.548-2.666c-0.09-0.049-0.141-0.148-0.128-0.25c.778-5.876 5.811-10.417 11.897-10.417c6.114 0 11.165 4.581 11.907 10.495l.001 .028c-0.001 .137-0.111 .247-0.248 .248c-0.044 0-0.087-0.012-0.125-0.035c-0.59-0.341-1.179-0.684-1.768-1.028c-0.078-0.045-0.174-0.045-0.252 .001l-1.777 1.044c-0.071 .042-0.157 .046-0.231 .012c-0.075-0.035-0.128-0.103-0.142-0.184c-0.691-3.524-3.774-6.069-7.365-6.081c-3.563 .011-6.63 2.518-7.351 6.007c-0.014 .073-0.061 .136-0.126 .171l-2.042 1.103c-0.075 .041-0.166 .041-0.241-0.001Z" fill="#4d7c0f" style="animation: 3s linear infinite both a0_t;transform-origin:center;"/></svg>

src/assets/brand/replaywebpage-icon-color.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><clipPath id="a"><path d="M0 0h23.04v23.04H0z"/></clipPath><g clip-path="url(#a)"><path d="M6.544 10.796a.239.239 0 0 1-.236-.282 5.32 5.32 0 0 1 2.959-3.801.118.118 0 0 1 .158.155c-.409.993-.69 2.276-.777 3.702a.24.24 0 0 1-.239.226zm7.07-3.927a.12.12 0 0 1 .026-.133.12.12 0 0 1 .133-.024 5.32 5.32 0 0 1 2.958 3.802.24.24 0 0 1-.235.281l-1.865.001a.24.24 0 0 1-.239-.226c-.087-1.426-.368-2.709-.778-3.701m2.882 5.367c.071 0 .138.032.184.086a.24.24 0 0 1 .052.196 5.32 5.32 0 0 1-2.959 3.802.12.12 0 0 1-.133-.024.12.12 0 0 1-.025-.132c.409-.992.69-2.275.777-3.702a.24.24 0 0 1 .239-.226zm-7.07 3.928a.12.12 0 0 1-.159.157 5.32 5.32 0 0 1-2.958-3.803.24.24 0 0 1 .052-.195.24.24 0 0 1 .183-.085c.475-.002 1.429-.002 1.865-.002a.24.24 0 0 1 .239.226c.087 1.427.368 2.71.778 3.702m.666-3.672a.24.24 0 0 1 .064-.18.24.24 0 0 1 .175-.075l2.378-.001a.24.24 0 0 1 .239.256c-.102 1.519-.442 2.843-.957 3.717a2.1 2.1 0 0 1-.397.509.12.12 0 0 1-.148 0 2.1 2.1 0 0 1-.397-.509c-.515-.874-.855-2.198-.957-3.717m2.856-1.951a.24.24 0 0 1-.239.255h-2.378a.24.24 0 0 1-.239-.255c.102-1.52.442-2.843.957-3.717.121-.206.261-.392.397-.509a.12.12 0 0 1 .148 0c.136.117.276.303.397.509.515.874.855 2.197.957 3.717" style="fill:#0891b2"/><path d="M22.833 12.8a.24.24 0 0 1 .122.24c-.746 5.641-5.578 10-11.421 10-5.869 0-10.718-4.398-11.43-10.075a.238.238 0 0 1 .357-.232c.518.3 1.38.802 1.697.987a.24.24 0 0 0 .242-.001l1.706-1.002a.24.24 0 0 1 .358.165 7.205 7.205 0 0 0 7.07 5.838 7.21 7.21 0 0 0 7.057-5.767.24.24 0 0 1 .121-.164l1.961-1.059a.24.24 0 0 1 .23.001zM.226 10.24A.24.24 0 0 1 .104 10C.85 4.359 5.682 0 11.525 0c5.869 0 10.718 4.398 11.43 10.075a.238.238 0 0 1-.357.232c-.518-.3-1.38-.802-1.697-.987a.24.24 0 0 0-.242.001l-1.706 1.002a.24.24 0 0 1-.358-.165 7.205 7.205 0 0 0-7.07-5.838 7.21 7.21 0 0 0-7.057 5.767.24.24 0 0 1-.121.164L2.386 11.31a.24.24 0 0 1-.231-.001z" style="fill:#4d7c0f"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 24 24"><path d="M6.807 11.246h-.001a.25.25 0 0 1-.245-.294 5.55 5.55 0 0 1 3.082-3.959.124.124 0 0 1 .176.111.1.1 0 0 1-.011.05c-.426 1.035-.719 2.371-.81 3.856a.25.25 0 0 1-.249.236zm7.364-4.091a.13.13 0 0 1 .027-.138.13.13 0 0 1 .139-.025 5.54 5.54 0 0 1 3.081 3.96.252.252 0 0 1-.245.293l-1.942.001a.25.25 0 0 1-.249-.236c-.091-1.485-.384-2.821-.811-3.855m3.002 5.591c.074 0 .144.033.192.089a.25.25 0 0 1 .054.205A5.54 5.54 0 0 1 14.337 17a.13.13 0 0 1-.139-.025.13.13 0 0 1-.026-.138c.426-1.033.719-2.369.81-3.856a.25.25 0 0 1 .249-.235zm-7.364 4.091q.01.024.01.05a.126.126 0 0 1-.176.114 5.55 5.55 0 0 1-3.081-3.961.25.25 0 0 1 .054-.204.25.25 0 0 1 .191-.088c.495-.002 1.488-.002 1.942-.002a.25.25 0 0 1 .249.235c.091 1.487.384 2.823.811 3.856m.694-3.825a.25.25 0 0 1 .066-.187.25.25 0 0 1 .183-.078l2.477-.001a.25.25 0 0 1 .249.25v.016c-.107 1.583-.461 2.962-.997 3.872q-.166.297-.414.531a.126.126 0 0 1-.154 0 2.2 2.2 0 0 1-.414-.531c-.536-.91-.89-2.289-.996-3.872m2.975-2.032v.016a.25.25 0 0 1-.249.25h-2.477a.25.25 0 0 1-.25-.25l.001-.016c.106-1.583.46-2.961.996-3.872.127-.214.272-.408.414-.53a.126.126 0 0 1 .154 0c.142.122.288.316.414.53.536.911.89 2.289.997 3.872" style="fill:#0891b2"/><path d="M23.774 13.333c.09.05.14.149.128.25C23.124 19.459 18.091 24 12.005 24 5.891 24 .84 19.419.098 13.505l-.001-.028a.25.25 0 0 1 .248-.248.24.24 0 0 1 .125.035c.54.312 1.438.835 1.768 1.028a.25.25 0 0 0 .252-.001l1.777-1.044a.25.25 0 0 1 .373.172 7.53 7.53 0 0 0 7.365 6.081 7.53 7.53 0 0 0 7.351-6.007.25.25 0 0 1 .126-.171l2.042-1.103a.25.25 0 0 1 .24.001zM.226 10.667a.25.25 0 0 1-.128-.25C.876 4.541 5.909 0 11.995 0c6.114 0 11.165 4.581 11.907 10.495l.001.028a.25.25 0 0 1-.248.248.24.24 0 0 1-.125-.035 516 516 0 0 1-1.768-1.028.25.25 0 0 0-.252.001l-1.777 1.044a.25.25 0 0 1-.373-.172A7.53 7.53 0 0 0 11.995 4.5a7.53 7.53 0 0 0-7.351 6.007.25.25 0 0 1-.126.171l-2.042 1.103a.25.25 0 0 1-.241-.001z" style="fill:#4d7c0f"/></svg>