Over the past year, a fun little project of mine has been constructing an elegant and efficient new tab page. Ever since I started using Chrome I was underwhelmed by the default new tab page: comprising only of a few recent links (most of which I never actually needed) and the Google search bar. What I wanted to have on that page were my key bookmarks, emboldened by a few beautiful backgrounds, surely that’s not too hard to ask for.

Using React, I mustered up a simple background component that would first fetch images from a personal collection of mine on Unsplash, before rendering them into view.

import React from "react";

export default class Background extends React.Component {
  componentDidMount() {
    let img = new Image();

    this.fetchUnsplashImage().then(unsplash => {
      let src = unsplash.urls.custom;
      img.onload = () => (this.refs.image.src = src);
      img.src = src;
    });
  }

  fetchUnsplashImage = function() {
    let url = "https://MYPROXY.net/collections=3688490";
    let w = `&w=${window.innerWidth}`;
    let h = `&h=${window.innerHeight}`;

    return fetch(url + w + h).then(res => res.json());
  };

  render() {
    return (
      <div id="container">
        <img id="image" ref="image" alt="" />
      </div>
    );
  }
}

However, there is a pretty obvious problem with doing this: the load time. Running an experiment, I worked out the average load time to fetch the Unsplash image was 395ms, and another 792ms to actually load the image and render it into view. This was happening because upon load, the component first had to send a API call to Unsplash, wait for a response, before finally sending another request to load the returned image URL. What this meant was there was a lot of unnecessary load time, which for a new tab page was unacceptable.

#reactjs #fast-loading #javascript