Feat: Loading Screen

[nelsonic]

As noted in our mini experiment for loading screen: https://github.com/dwyl/flutter-phoenix-channels-demo/pull/4 The code required to create a loading screen is minimal and does increase the bundle size. It loads immediately because it's just HTML and gives the person viewing (waiting) some visual indication of progress while the bundle (main.dart.js) is downloading.

Let's implement it for the Flutter Web App so that we can both give people a sense of progress ⏳ and give Google something to see while the app is loading ... 🤖

Todo

• [x] Create the loading screen in Figma first: https://www.figma.com/file/WrpkKGJNYZbeCzMRDVtvQLbC/dwyl-app?node-id=1631%3A4371

• [x] use your design skills to create a good-looking but low overhead loading screen. e.g:
  • [x] Select a dark background from the existing color palette: https://github.com/dwyl/dwyl-site/blob/3037e5f6c30f12a49535ceef6e379a1a09a29cab/css/dwyl.css#L37-L39

    .dwyl-bg-dark-gray {
    background-color: #354046;
    }

  • [x] Vertically + Horizontally centred dwyl Logo e.g: 64 x 64 px if we have one (smaller the better to reduce load time)
  • [x] Logo Should have transparent background
  • [x] Centred tagline below the logo:
  • [x] copy: "do what you love" (we can change this in the future, just to have something)
  • [x] Font color: "off-white" #F2F2F2 https://github.com/dwyl/learn-wireframing/issues/13#issuecomment-1428778259
• [x] No CSS transitions or any superfluous JS (for now ...) just the simplest/fastest-loading screen possible that is replaced as soon as the main.dart.js is loaded. 🙏
• [x] Please avoid importing a CSS library if you can. Borrow the styles from Tailwind if you need to. But in-line the CSS in the index.html file so that it loads as fast as possible. 🐎

@LuchoTurtle given your recent experience with this, want to pick this one up? 👌 Please drop a comment to confirm that this task is clear or to seek further clarification. 💬 For now we only need this for the Flutter Web version. 📱 We can re-assess for the iOS and Android when the time comes to ship these to the respective App Stores. 💭

[LuchoTurtle]

yes 👍 looks clear enough.

[nelsonic]

Cool. Please assign PR when ready. 🙏