amarbalu

.no-webp .home-banner-background {
     background-image: url('img/banner.jpg');
 }

.webp .home-banner-background {
     background-image: url('img/banner.webp');
}

amarbalu

export const canUseWebp = headers => {
//headers will be passed as an input
 const { accept: header = '' } = headers || {};
 // accept is denoted as header
  let useWebp = false;
  if (header && header.indexOf('image/webp') !== -1) {
    // Server side rendering
    useWebp = true;
  }
  return useWebp;

amarbalu

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };

amarbalu

export const canUseWebp = headers => {
  let useWebp = false;
  if (typeof document === 'object') {
    // Client side rendering
    const canvas = document.createElement('canvas');

    if (
      canvas.getContext &&
      canvas.getContext('2d') &&
      canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0

amarbalu

import React from "react";

const Loading = props => {
  if (props.error) {
    return <div>Error!</div>;
  } else {
    return <div>Loading...</div>;
  }
};

amarbalu

function LoadableVisibilityComponent(props) {
    const visibilityElementRef = useRef();
    const [isVisible, setVisible] = useState(preloaded);

    function visibilityHandler() {
      if (visibilityElementRef.current) {
        intersectionObserver.unobserve(visibilityElementRef.current);
        trackedElements.delete(visibilityElementRef.current);
      }

amarbalu

let intersectionObserver;
const trackedElements = new Map();

if (IntersectionObserver) {
  intersectionObserver = new window.IntersectionObserver(
    (entries, observer) => {
      entries.forEach(entry => {
        const visibilityHandler = trackedElements.get(entry.target);

        if (

amarbalu

import React, { Component } from 'react'
import Loadable from 'react-loadable'
import createLoadableVisibilityComponent from './createLoadableVisibilityComponent'
import { IntersectionObserver } from './capacities'

function LoadableVisibility (opts) {
  if (IntersectionObserver) {
    return createLoadableVisibilityComponent([opts], {
      Loadable,
      preloadFunc: 'preload',

amarbalu

  render() {
      if (this.state.loading || this.state.error) {
        return React.createElement(opts.loading, {
          isLoading: this.state.loading,
          pastDelay: this.state.pastDelay,
          timedOut: this.state.timedOut,
          error: this.state.error,
          retry: this.retry
        });
      } else if (this.state.loaded) {

amarbalu

import Loadable from 'react-loadable';
import Loading from './Loading';

export default Loadable({
  loader: () =>
    import(/* webpackChunkName: "ComponentName" */ 'components/componentName'),
  modules: ['components/componentName'],
  loading: () => Loading,
});