JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 1px solid black"></canvas>

<div class="loading-bar" style="display: none;">
        <div class="loading-bar-img">
        <div>
            <img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif" alt=""><br>
            <span>Loading...</span>
            </div>
        </div>
    </div>

CSS

.loading-bar{ position:fixed; width:100%; height:100%; text-align:center;  z-index:9999; display:none;}
.loading-bar-img{top:0%; position:fixed;width:100%; height:100%; background-color:#ffffff; opacity:0.8; }

JavaScript

canvas = new fabric.Canvas('canvas');

/* loading image pop up comes here*/

//alert('render start');
                
//$(".loading-bar").show();

json1 = { "objects": [{ "type": "circle", "originX": "left", "originY": "top", "left": 119, "top": 284, "width": 100, "height": 100, "fill": "#bf197a", "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "strokeLineCap": "butt", "strokeLineJoin": "miter", "strokeMiterLimit": 10, "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY": false, "opacity": 0.8, "shadow": null, "visible": true, "clipTo": null, "backgroundColor": "", "fillRule": "nonzero", "globalCompositeOperation": "source-over", "radius": 50, "startAngle": 0, "endAngle": 6.283185307179586 }, { "type": "circle", "originX": "left", "originY": "top", "left": 112, "top": 121, "width": 100, "height": 100, "fill": "#55316d", "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "strokeLineCap": "butt", "strokeLineJoin": "miter", "strokeMiterLimit": 10, "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY": false, "opacity": 0.8, "shadow": null, "visible": true, "clipTo": null, "backgroundColor": "", "fillRule": "nonzero", "globalCompositeOperation": "source-over", "radius": 50, "startAngle": 0, "endAngle": 6.283185307179586 }, { "type": "triangle", "originX": "left", "originY": "top", "left": 349, "top": 172, "width": 50, "height": 50, "fill": "#b570e4", "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "strokeLineCap": "butt", "strokeLineJoin": "miter", "strokeMiterLimit": 10, "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY": false, "opacity": 0.8, "shadow": null, "visible": true, "clipTo": null, "backgroundColor": "", "fillRule": "nonzero", "globalCompositeOperation": "source-over" }, { "type": "text", "originX": "left", "originY": "top", "left": 308, "top": 260, "width": 598.13, "height": 260, "fill": "#5c70ee", "stroke": null, "strokeWidth": 1, "strokeDashArray": null, "strokeLineCap": "butt",...