Fancytree test (lazy load)

Fancytree prototype to test suitability to project

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.9.0/jquery.fancytree-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.9.0/skin-awesome/ui.fancytree.min.css">
<div id="tree"></div>

CSS

.fancytree-node {
    display: flex !important;
    align-items: center;
}
.fancytree-exp-nl .fancytree-expander,
.fancytree-exp-n .fancytree-expander {
    visibility: hidden;
}
.fancytree-exp-nl + ul,
.fancytree-exp-n + ul {
    display: none !important;
}
span.fancytree-expander,
span.fancytree-icon,
span.fancytree-title {
    line-height: 1em;
}
span.fancytree-expander {
    text-align: center;
}
span.fancytree-icon {
    margin-left: 10px;
}
span.fancytree-title {
    margin-left: 2px;
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.fancytree-focused span.fancytree-title {
    border: 1px solid #999;
}
.fancytree-active span.fancytree-title {
    background-color: #ddd;
}
ul.fancytree-container ul {
    padding: 2px 0 0 25px;
}
ul.fancytree-container li {
    padding: 2px 0;
}

JavaScript

function expandChildren(node) {
    if (node.data.autoExpand && !node.isExpanded()) {
        node.setExpanded(true);
    }
    if (node.children && node.children.length > 0) {
        try {
            node.children.forEach(expandChildren);
        } catch (error) {
        }
    }
};

$("#tree").fancytree({
    aria: true, // Enable WAI-ARIA support.
    autoActivate: false, // Automatically activate a node when it is focused (using keys).
    autoCollapse: false, // Automatically collapse all siblings, when a node is expanded.
    autoScroll: false, // Automatically scroll nodes into visible area.
    focusOnSelect: true, // Set focus when node is checked by a mouse click
    keyboard: true, // Support keyboard navigation.
    tabbable: true, // Whole tree behaves as one single control
    extensions: ["glyph"],
    glyph: {
        map: {
            doc: "fa fa-file-o fa-lg",
            docOpen: "fa fa-file-o fa-lg",
            error: "fa fa-warning",
            expanderClosed: "fa fa-chevron-right",
            expanderLazy: "fa fa-chevron-right",
            expanderOpen: "fa fa-chevron-down",
            folder: "fa fa-folder fa-lg",
            folderOpen: "fa fa-folder-open fa-lg",
            loading: "fa fa-spinner fa-pulse"
        }
    },
    source: [
        { title: 'File 1 in home folder', key: 'qA100' },
        { title: 'File 2 in home folder', key: 'qA101' },
        { title: 'Folder in home folder', key: 'fA100', folder: true, lazy: true },
        { title: 'File with some children (auto-expand)', key: 'qA102', lazy: true, autoExpand: true },
        { title: 'File with no children', key: 'qA110', lazy: true },
        { title: 'File with no children (auto-expand)', key: 'qA111', lazy: true, autoExpand: true }
    ],
    init: function(event, data) {
        expandChildren(data.tree.rootNode);
    },
    lazyLoad: function(event, data) {
        var deferredResult = jQuery.Deferred();
        var result = [];
        
       ...